HTML無序列表中的第三級

我一直在嘗試製作一個無序列表（導航菜單），其中第三級將下降，而不是單擊按鈕右側。類似的事情在這裏的一個 -HTML無序列表中的第三級

http://themeforest.net/item/adminica-the-professional-admin-template/full_screen_preview/160638

我有腳本它使第三級出現在按鈕的點擊。但我無法將第三層降下來。它來到了右邊。

我的代碼 -

<ul class="drop"> 
      <li><a href="#">Home</a></li> 
      <li>Dashboard 
       <ul> 
        <li><a href="#">Student Activity</a></li> 
        <li><a href="#">Departments</a></li> 
        <li><a href="#">Gallery</a></li> 
        <li><a href="#">News and Events</a></li> 
        <li><a href="#">Content Management</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Contact Us</a></li>     
       </ul> 
      </li> 
      <li>Student Info 
       <ul> 
        <li><a href="#">Example 1</a> 
         <ul class="drawer"> 
          <li><a href="#">Third level 1</a></li> 
          <li><a href="#">Third level 2</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Example 2</a> 
         <ul class="drawer"> 
          <li><a href="#">Third level 1</a></li> 
          <li><a href="#">Third level 2</a></li> 
          <li><a href="#">Third level 3</a></li> 
          <li><a href="#">Third level 4</a></li> 
          <li><a href="#">Third level 5</a></li> 
          <li><a href="#">Third level 6</a></li> 
         </ul> 
        </li>       
       </ul> 
      </li> 
      <li><a href="#">Teacher Info</a></li> 
      <li><a href="#">Add+</a></li> 
      <li><a href="#">Student Report</a></li> 
      <li><a href="#">Teacher Report</a></li> 
</ul>

CSS -

ul.drop a { 
display:block; 
} 
ul.drop, ul.drop li, ul.drop ul { 
margin: 0; 
padding: 0; 
border: 1px solid #fff; 
background: #555; 
color: #fff; 
} 
ul.drop { 
position: relative; 
z-index: 597; 
float: left; 
} 
ul.drop li { 
float: left; 
line-height: 1.3em; 
vertical-align: middle; 
zoom: 1; 
padding: 5px 10px; 
} 
ul.drop li.hover, ul.drop li:hover { 
position: relative; 
z-index: 599; 
cursor: default; 
background: #1e7c9a; 
} 
ul.drop ul { 
visibility: hidden; 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 598; 
width: 195px; 
background: #555; 
border: 1px solid #fff; 
} 
ul.drop ul li { 
float: none; 
} 
ul.drop ul ul { 
top: -2px; 
left: 100%; 
} 
ul.drop li:hover > ul { 
visibility: visible 
}

我在尋找一個幫助:)謝謝。

來源

2013-02-28 Sagar Raj

我沒有看到任何JavaScript ... – ahren 2013-02-28 05:44:12

ahren - jQuery的文件只是使第三級出現在按鈕的點擊。 – 2013-02-28 05:51:51

更新的CSS像這樣（註釋行都是老語句）：

ul.drop ul ul { 
    position:static; 
    display:none; 
    width:100%; 
    /*top: -2px; */ 
    /*left: 100%; */ 
} 
ul.drop li:hover > ul { 
    visibility: visible; 
    display: block; 
}

然而，你可能會想進一步調整爲第三級菜單的樣式。

例子：jsFiddle

來源

2013-02-28 05:47:34 earthdesigner

HTML無序列表中的第三級

回答

相關問題