多级下拉导航菜单问题答案

【问题标题】：Multi-level dropdown navigation menu issue多级下拉导航菜单问题
【发布时间】：2019-07-24 15:01:36
【问题描述】：

我的网站导航栏有一个多级下拉菜单，并且它在下一级可以正常工作，但是当我尝试放置额外的一级时，它们会同时显示。

我希望当我将鼠标悬停在第一个菜单项上时，它不应该显示任何子菜单，直到我将鼠标悬停在带有子菜单的菜单项上。下面是我的代码的 HTML。

index.html

   <nav class="fh5co-nav" role="navigation">
       <div class="container">
               ......
         <ul>
         <li class="has-dropdown">
          <a href="#.html">Venues</a>
           <ul class="dropdown">

            <li class="dropdown-submenu">

             <!-- with submenu -->
             <a href="#" class="dropdown-toggle"
                     data-toggle="dropdown">Harare</a>

               <ul class="dropdown">
                <li><a href="#">Palm Estate</a></li>
                <li><a href="#">Rainbow Towers</a></li>
                <li><a href="#">Bushman Rock</a></li>  
               </ul>

            </li>

            <!-- without submenu -->
            <li><a href="#">Troutbeck Resort</a></li>

           </ul>
          </li>
        </ul>
       .....

styles.css

.fh5co-nav ul li.has-dropdown .dropdown {
 width: 200px;
 -webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
 box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
 z-index: 1002;
 visibility: hidden;
 opacity: 0;
 position: absolute;
 top: 40px;
 left: 0;
 text-align: left;
 background: #fff;
 padding: 20px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -ms-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition: 0s;
 -o-transition: 0s;
 transition: 0s;
}

 .dropdown-submenu {
  position:relative;
 }

 .dropdown-submenu > a:after {
 border-color: transparent transparent transparent #333;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 content: " ";
 display: block;
 float: right;  
 height: 0;     
 margin-right: -10px;
 margin-top: 5px;
 width: 0;
}

请帮忙。谢谢。

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

这个 css 对我有用：

ul li{
    position: relative;
    display: inline-block;
}

.dropdown {
 width: 200px;
 -webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
 -moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
 box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
 z-index: 1002;
 visibility: hidden;
 opacity: 0;
 position: absolute;
 top: 14px;
 left: 0;
 text-align: left;
 background: #fff;
 padding: 20px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -ms-border-radius: 4px;
 border-radius: 4px;
 -webkit-transition: 0s;
 -o-transition: 0s;
 transition: 0s;
}

 .dropdown-submenu {
  position:relative;
 }

 .dropdown-submenu > a:after {
 border-color: transparent transparent transparent #333;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 content: " ";
 display: block;
 float: right;  
 height: 0;     
 margin-right: -10px;
 margin-top: 5px;
 width: 0;
}
ul ul li:hover ul,
ul li:hover > ul{
    opacity: 1;
    visibility: visible;
}

谢谢

【讨论】：