为什么我的下拉菜单不起作用？答案

【问题标题】：Why doesnt my dropdown menu work?为什么我的下拉菜单不起作用？
【发布时间】：2014-08-14 07:54:17
【问题描述】：

下拉菜单不起作用。当我删除功能“display:none”时，子菜单中的 UL 会显示，然后我添加 a:hover、display:block，它会消失，但是当我将鼠标悬停在它上面时，子菜单会显示。为什么？

HTML

<div id="nav">
    <ul>
        <li class="active"><a href="index.html">> om oss</a></li>
        <li><a href="page/vad.html">> vad vi gör</a></li>
        <li><a href="page/retorik.html">> vad är retorik?</a></li>
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>
            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>
        <li><a href="sidor/weekend.html">> storytelling</a></li>
        <li><a href="sidor/fq.html">> kontakt</a></li>
    </ul>
</div>

CSS

#nav {
    background-color: #8D8084;
}
#nav ul {
    margin: 0;
    list-style-type: none;
    padding: 12px;
}
#nav li {
    display: inline;
}
#nav a {
}
#nav ul li a {
    text-decoration: none;
    color: #fff;
    padding-right: 60px;
    padding-top: 15px;
    padding-bottom: 13px;
    padding-left: 50px;
    margin: -12px;
    background: #8D8084;
    font-family: Candara, "Trebuchet MS", Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}
#nav ul li.active a {
    background-color: #A4999D;
    color: #FFFFFF;
}
#nav a:hover {
    background-color: #A4999D;
    color: #FFF;
}
#nav ul ul {
    display: none;
}
#nav ul li:hover > ul {
    display: block;
}

【问题讨论】：

标签： css

【解决方案1】：

你关闭li标签太快了：

<li><a href="page/retorik.html">> vad är retorik?</a></li> <!-- this shouldn't close here -->

<ul>
    <li><a href="#">Sevice one</a></li>
    <li><a href="#">Sevice two</a></li>    
    <li><a href="#">Sevice three</a></li>
    <li><a href="#">Sevice four</a></li>
</ul>

修复

<li>
    <a href="page/retorik.html">> vad är retorik?</a>     
    <ul>
        <li><a href="#">Sevice one</a></li>
        <li><a href="#">Sevice two</a></li>    
        <li><a href="#">Sevice three</a></li>
        <li><a href="#">Sevice four</a></li>
    </ul>    
</li><!--  it should close here -->

【讨论】：

谢谢，成功了！但现在我有一个新问题。下拉菜单应显示在其下方而不是其旁边。
@SabaaAlkatib 看看这个小提琴：jsfiddle.net/chrissp26/by0fmd4o 它应该让您了解如何在下面放置子菜单。如果您仍然有问题，请再问一个问题；）

【解决方案2】：

#nav ul li:hover > ul {
    display: block;
}

上面的代码将尝试在悬停时找到一个子ul 元素。您的代码中没有子 ul 元素。它是兄弟元素。如下所示更新您的代码。

  #nav ul li:hover + ul {
    display: block;
  }

【讨论】：

【解决方案3】：

您没有在正确的位置关闭标签

<li><a href="page/retorik.html">> vad är retorik?</a></li>

        <ul>

应该是

<li><a href="page/retorik.html">> vad är retorik?</a>

        <ul>
......insert dropdown here
        </ul>
</li>

这是我创建的工作 Codepen http://codepen.io/Prashantsani/pen/tIfqb

此外，您不能将任何标签作为<ul>Tag 的直接子代。 <ul> 或 <ol> 只能将 <li> 作为直接子代。在您的 html 中，您在关闭 </li> 后插入了一个 <ul> ，从而使下拉列表 <ul> 成为 <ul> 的直接子级。

【讨论】：