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