引導程序中的多級下拉菜單

我正在嘗試基於twitter引導程序製作多級菜單。引導程序中的多級下拉菜單

下面是HTML：

<!DOCTYPE html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <title>Twitter Bootstrap Menu</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"> 
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> 
    <body> 
     <div class="container"> 
       <div class="dropdown clearfix"> 
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> 
         <li><a tabindex="-1" href="#">Action</a></li> 
         <li><a tabindex="-1" href="#">Another action</a></li> 
         <li><a tabindex="-1" href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li class="dropdown-submenu"><a tabindex="-1" href="#">More options</a> 
          <ul class="dropdown-menu"> 
           <li><a tabindex="-1" href="#">Second level link</a></li> 
           <li><a tabindex="-1" href="#">Second level link</a></li> 
           <li><a tabindex="-1" href="#">Second level link</a></li> 

            <li class="dropdown-submenu"><a tabindex="-1" href="#">Sub with sub</a> 
            <ul class="dropdown-menu"> 
            <li><a tabindex="-1" href="#">SubSub1</a></li> 
            <li><a tabindex="-1" href="#">SubSub2</a></li> 
            </ul> 
            </li> 
           <li><a tabindex="-1" href="#">Second level link</a></li> 
          </ul> 
         </li> 
        </ul> 
      </div> 
      </body> 

    </html>

我想不通，爲什麼子菜單是隱藏的，直到我懸停在「更多選項」但後來我看到directky二級菜單。雖然我希望（並希望）只有當我懸停在「Sub with sub」子菜單項上時纔會看到它。

你有什麼建議嗎？

來源

2012-09-01 Alexander P

添加到你的CSS下面的代碼：

.dropdown-submenu:hover > .dropdown-menu .dropdown-menu { display: none; } 
.dropdown-submenu:hover .dropdown-submenu:hover > .dropdown-menu { display: block; }

來源

2012-09-01 14:29:18 dyurkavets

謝謝。有用！ http://jsfiddle.net/rQ9UQ/ –

顯然這是不可能的「開箱」;你必須自己做CSS修改。

查看此線程以獲取更多信息：Twitter Bootstrap Multilevel Dropdown Menu
在最佳響應的結尾處有一個演示鏈接，它似乎對應於您正在等待的內容！

弗洛裏安

來源

2012-09-01 14:28:42 Florian

引導程序中的多級下拉菜單

回答

相關問題