Question

下拉菜单无效。当我删除功能＆＃34; display：none＆＃34;子菜单中的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;
}

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>的直接子项。

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

3 个答案: