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

我想添加一个jquery移动按钮到下拉导航栏。然而，我不能获得<ul>标签样式的移动按钮。这似乎无论我尝试的jquery样式不生效。我已经包含了一个js小提琴。CSS内的jquery移动按钮下拉导航栏

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 "> 
 
    \t 
 
    \t \t <a id="Logout " class="ui-btn ui-icon-search ui-btn-icon-left ">Logout</a> 
 
    \t 
 
     </li> 
 
    </ul> 
 
    </nav>

这里是一个的jsfiddle：https://jsfiddle.net/w8xy7Lu2/

来源

2016-09-16 user2810718

您试图将哪个按钮添加到导航栏？ –

其实它是jquery mobile的电源图标 – user2810718

Logout – user2810718