我基于最新的（v2.0.2）Bootstrap框架创建了一个纯悬停下拉菜单，该框架具有对多个子菜单的支持，并认为我会将其发布给以后的用户：
body { padding-top: 60px; padding-bottom: 40px;}.sidebar-nav { padding: 9px 0;}.dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px;}.dropdown-menu li:hover .sub-menu { visibility: visible;}.dropdown:hover .dropdown-menu { display: block;}.nav-tabs .dropdown-menu,.nav-pills .dropdown-menu,.navbar .dropdown-menu { margin-top: 0;}.navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px;}.navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px;}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" /><div > <div > <div > <a data-target=".nav-collapse" data-toggle="collapse" > <span ></span> <span ></span> <span ></span> </a> <a href="#" >Project name</a> <div > <ul > <li ><a href="#">Home</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li > <a data-toggle="dropdown" href="#">Dropdown <b ></b></a> <ul > <li> <a href="#">2-level Dropdown <i ></i></a> <ul > <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li ></li> <li >Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li ></li> <li >Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form action="" > <input type="text" placeholder="Search" > </form> <ul > <li><a href="#">link</a></li> <li ></li> <li > <a href="#">Menu</a> </li> </ul> </div> <!-- /.nav-collapse --> </div> </div></div><hr><ul > <li ><a href="#">Regular link</a></li> <li > <a href="#" data-toggle="dropdown" >Dropdown <b ></b></a> <ul id="menu1"> <li> <a href="#">2-level Menu <i ></i></a> <ul > <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li ></li> <li >Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li ></li> <li><a href="#">Separated link</a></li> </ul> </li> <li > <a href="#">Menu</a> </li> <li > <a href="#">Menu</a> </li></ul>
