Question

我的网站导航栏有一个多级下拉菜单，向下一级可以正常使用，但是当我尝试增加一个级别时，它们都同时显示。

我希望当我将鼠标悬停在第一个菜单项上时，它不会显示任何子菜单，直到我将鼠标悬停在带有子菜单的菜单项上。下面是我的代码的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;
}

请帮助。谢谢。

Answer 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;
}

谢谢

多级下拉导航菜单问题

1 个答案: