CSS下拉导航栏内的jquery移动按钮

Question

我正在尝试将 jquery 移动按钮添加到下拉导航栏。但是我无法获得 <ul>标记 o 样式移动按钮。看来无论我尝试什么，jquery 样式都不会生效。我已经包含了一个 js fiddle 。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li.right {
  float: right;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 40px;
  background-color: #333;
}

<nav class="fixed-nav-bar">
  <ul data-role="listview" ">
      <li><a class="active " href="#home ">Home</a></li>
      <li><a href="#news ">News</a></li>
      <li class="dropdown ">
        <a href="# " class="dropbtn ">Dropdown</a>
        <div class="dropdown-content ">
          <a href="# ">Link 1</a>
          <a href="# ">Link 2</a>
          <a href="# ">Link 3</a>
        </div>
      </li>
      <li class="right ">
    	
    		<a id="Logout " class="ui-btn ui-icon-search ui-btn-icon-left ">Logout</a>
    	
      </li>
    </ul>
    </nav>

这是一个 jsfiddle:https://jsfiddle.net/w8xy7Lu2/

Answer 1

@CBroe ..感谢您的建议。实际上组织 CSS 和文件以及 jquery 资源已经解决了这个问题。请查看 jsfiddle