如何正确显示下拉菜单

Question

我想在悬停但不工作时播放菜单。

HTML代码倒afficher：

<nav> 
    <ul class="menu"> 
     <li><a href="index.html">home</a></li> 
     <li class="current">other</a></li> 
     <li> 
      <a href="index-2.html">services</a> 
      <ul class="drop"> 
       <li><a href="index-2.html">s1</a></li> 
       <li><a href="index-4.html">s2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

CSS代码来显示菜单和下拉：

nav .menu li:hover > a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li :hover > .drop{ 
    display:black; 
} 

Answer 1

nav .menu li:hover > a { 
 
    background: #e2782e; 
 
    transition: all 0.5s; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
} 
 

 
.drop{ 
 
    display: none; 
 
} 
 

 
li:hover > .drop{ 
 
    display: block; 
 
}

<nav> 
 
    <ul class="menu"> 
 
    <li><a href="index.html">home</a></li> 
 
    <li class="current"><a href="#">other</a></li> 
 
    <li><a href="index-2.html">services</a> 
 
     <ul class="drop"> 
 
     <li><a href="index-2.html">s1</a></li> 
 
     <li><a href="index-4.html">s2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

<nav> 


    <ul class="menu"> 


            <li><a href="index.html">home</a></li> 
            <li class="current">other</a></li> 


            <li> 
             <a href="index-2.html">services</a> 
             <ul class="drop"> 

            <li><a href="index-2.html">s1</a></li> 
            <li><a href="index-4.html">s2</a></li> 

             </ul> 
            </li> 

           </ul> 

    </ul> 

</nav> 


nav .menu li:hover .drop li a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li :hover > .drop{ 
    display:block; 
} 

Please try this code. 

Answer 3

几个问题：

• unnested </a>“其他”菜单项的标签。
• 末
• black外来</ul>标签是不是为display属性的有效值，使用list-item来代替。

编辑：请参阅Nick De Jaeger对上述修正代码的回答。使用display: block也可以，但在这种情况下list-item更合适（<li>）。

Answer 4

巴特看这里，这是所有的CSS，当我将鼠标悬停在下拉所有auther菜单项墙根

nav .menu { 
     height: 60px; 
     background: #8d8989; 
     border-radius: 5px; 
     padding: 0; 
     margin: 0; 
     text-align: center; /* center the li */ 

    } 

    nav .menu li { 
     display: inline-block; 
    } 

    nav .menu li a{ 
     font-family: arial, sans-serif; 
     color: #fff; 
     text-decoration: none; 
     text-transform: uppercase; 
     line-height: 60px; 
     font-weight:bold; 
     vertical-align: middle; 
     padding: 20px; 
     transition: all 0.5s; 
    } 
    nav .menu li:hover > a { 
     background: #e2782e; 
     transition: all 0.5s; 
     color: #FFF; 
     font-weight: bold; 
    } 

    .drop{ 
     display: none; 
    } 

    li:hover > .drop{ 
    display: list-item; 
     background-color:red; 
    } 

HTML

<nav> 


    <ul class="menu"> 


            <li><a href="index.html">home</a></li> 
            <li><a href="index.html">contact</a></li> 
            <li> 
             <a href="index-2.html"><?php echo $lang['MENU_OUR_PRODUCTS']; ?></a> 
             <ul class="drop"> 

            <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li> 
            <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li> 
            <li><a href="index-2.html"><?php echo $lang['MENU_History']; ?></a></li> 
            <li><a href="index-4.html"><?php echo $lang['MENU_CONTACT_US']; ?></a></li> 
             </ul> 
            </li> 

           </ul> 

    </ul> 

</nav> 

Answer 5

看到这里jsfiddle

你有一些问题您的代码

首先在您的HTML中li.current上有一个结束标记</a>，但您没有任何<a>那里。使结束标记不需要

也必须和额外的结束标记</ul>，你只有2 ul关闭，ul.menu和ul.drop所以你只需要2 </ul>不3.

第二次在你的CSS ，你有一个li和:hover之间的空间，你需要把它们写在一起，如li:hover。

也display:black不存在，我猜你想写display:block

更新代码的HTML：

<ul class="menu"> 


           <li><a href="index.html">home</a></li> 
           <li class="current">other</li> 


           <li> 
            <a href="index-2.html">services</a> 
            <ul class="drop"> 

           <li><a href="index-2.html">s1</a></li> 
           <li><a href="index-4.html">s2</a></li> 

            </ul> 
           </li> 



    </ul> 

CSS：

nav .menu li:hover > a { 
    background: #e2782e; 
    transition: all 0.5s; 
    color: white; 
    font-weight:bold; 
} 

.drop{ 
    display:none; 
} 

li:hover > .drop{ 
    display:block; 
} 

让我知道，如果它帮助。

注：有关于这个的计算器这么多问题，你应该能够很快找到答案，你也可能要检查这个CSS Dropdowns

Answer 6

请检查下面的代码，供您参考。

ul.drop{display:none;} 
 
nav ul li a:hover{background:#ccc;} 
 
nav ul li:hover ul.drop{display:block;}

<nav> 
 
    <ul class="menu"> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">other</a></li> 
 
    <li><a href="#">services</a> 
 
     <ul class="drop"> 
 
     <li><a href="#">s1</a></li> 
 
     <li><a href="#">s2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>