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

Question

下拉菜单不起作用。 当我删除子菜单中显示的UL功能“ display：none”时，然后添加了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;
}

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

Answer 2

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

上面的代码将尝试在悬停时查找子ul元素。 您的代码中没有子ul元素。 这是兄弟姐妹元素。 如下更新代码。

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

Answer 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>标签的直接子元素。 <ul>或<ol>只能将<li>作为直接子代。 在你的HTML你插入一个<ul>结束后</li>从而使下拉菜单<ul>的直接子<ul>