Question

我的项目中的菜单有问题，尤其是他的节目。我希望当我将健康小贴士，食谱和最后一个沙拉，新鲜和冰沙的子菜单放在显示时。这是HTML代码：

`
<div id="nav">
    <ul class="nav-list">
        <li><a href="home.html">Home</a></li>
        <li><a href="#">Tips for health</a></li>
        <li>
            <ul class="sub-nav-list">
                <li><a href="lechebn%20isvoistva.html">The healing properties</a></li>
                <li><a href="5%20vajni%20podpravki.html">5 important spices that you should include in your diet</a></li>
                <li><a href="loshi%20navici.html">Bad habits and their removal</a></li>
                <li><a href="vodata.html">Water as a source of life</a></li>
            </ul>
        </li>
        <li><a href="title=">Recipes</a></li>
        <li>
            <ul class="sub-nav-list">
                <li><a href="#"Salads</a></li>
                <li><a href="zelena%20salata.html">Lettuce</a></li>
                <li><a href="frenska%20salata.html">French salad</a></li>
                <li><a href="salata%20cherveno%20cveklo.html"Red Beet Salad</a></li>
            </ul>
        </li>
        <li>
            <ul class="sub-nav-list">
                <li><a href="#">Fresh</a></li>
                <li><a href="sweet%20fresh.html">Sweet fresh</a></li>
                <li><a href="fresh%20za%20detoksikaciq.html">Fresh detox</a></li>
                <li><a href="citrusov%20fresh.html">Citrus fresh</a></li>
            </ul>
        </li>
        <li>    
            <ul class="sub-nav-list">   
                <li><a href="#">Smoothies</a></li>
                <li><a href="smuti%20shokolad.html">Смути шоколад</a></li>
                <li><a href="tropichesko%20smuti.html">Chocolate smoothie</a></li>
                <li><a href="smuti%20banan%20ananas.html">Smoothie with banana and pineapple</a></li>
            </ul>
        </li>
        <li><a href="contact.html">Contacts</a></li>
    </ul>
</div>

这是CSS代码：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #F6F2E8;
}
li a {
  display: block;
  color: #A6BB79;
  padding: 8px 0 8px 16px;
  text-decoration: none;
} 
.sub-nav-list{
  display: none;
}
ul.nav-list li > ul.sub-nav-list li a:hover {
  color: red;
  display: block;
}

Answer 1

您的意思是当您将父项目悬停在<li><a href="#">Tips for health</a></li>＆＃39;你想要子导航ul＆＃39; <ul class="sub-nav-list"></ul>＆＃39;显示？

如果是这样，你需要改变一些事情。

您需要重新排列html，以便ul.sub-nav-list在父li内
您需要定位ul.sub-nav-list而不是li a与css一起展示

例如;

<div id="nav">
    <ul class="nav-list">
        <li><a href="home.html">Home</a></li>
        <li>
            <a href="#">Tips for health</a>
            <ul class="sub-nav-list">
                <li><a href="lechebn%20isvoistva.html">The healing properties</a></li>
                <li><a href="5%20vajni%20podpravki.html">5 important spices that you should include in your diet</a></li>
                <li><a href="loshi%20navici.html">Bad habits and their removal</a></li>
                <li><a href="vodata.html">Water as a source of life</a></li>
            </ul>
        </li>
        <li>
            <a href="title=">Recipes</a>
            <ul class="sub-nav-list">
                <li><a href="#"Salads</a></li>
                <li><a href="zelena%20salata.html">Lettuce</a></li>
                <li><a href="frenska%20salata.html">French salad</a></li>
                <li><a href="salata%20cherveno%20cveklo.html"Red Beet Salad</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Fresh</a>
            <ul class="sub-nav-list">
                <li><a href="sweet%20fresh.html">Sweet fresh</a></li>
                <li><a href="fresh%20za%20detoksikaciq.html">Fresh detox</a></li>
                <li><a href="citrusov%20fresh.html">Citrus fresh</a></li>
            </ul>
        </li>
        <li>    
            <li><a href="#">Smoothies</a><
            <ul class="sub-nav-list">   
                <li><a href="smuti%20shokolad.html">Смути шоколад</a></li>
                <li><a href="tropichesko%20smuti.html">Chocolate smoothie</a></li>
                <li><a href="smuti%20banan%20ananas.html">Smoothie with banana and pineapple</a></li>
            </ul>
        </li>
        <li><a href="contact.html">Contacts</a></li>
    </ul>
</div>

现在具有正确的结构。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #F6F2E8;
}
li a {
  display: block;
  color: #A6BB79;
  padding: 8px 0 8px 16px;
  text-decoration: none;
} 
.sub-nav-list{
  display: none;
}
ul.nav-list li:hover > ul.sub-nav-list {
  color: red;
  display: block;
}

这将显示任何ul的{{1}}的孩子

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

1 个答案: