Question

我试图为每个项目制作一个带有下拉菜单的导航栏，我知道需要具有可见性以及CSS中没有的内容，但我不确定如何操作。

要明确id想要像

这样的东西

Food | Houseware | Toys  
-----
Breakfast
Lunch
Dinner
Snack > Orange
        banana
        apple

<section id="navbar">
        <ul>
            <li><a href=#> Food </a></li>
            <li><a href=#> Houseware 
                <ul>
                    <li><a href=#> Breakfast </a></li>
                    <li><a href=#> Lunch </a></li>
                    <li><a href=#> Dinner </a></li>
                    <li><a href=#> Snacks </a></li>
                </ul>
            </a></li>
            <li><a href=#> Toys </a></li>
        </ul>
</section>

这是我目前的代码，它创建了顶部的酒吧，但是早餐晚餐午餐小吃＆＃34;在每个特定:hover使用<li>之前，我需要隐藏猜测。我想我的问题是关于将列表放在列表中是对的吗？如果是这样，那么有人可以解释使用什么的概念，使其隐藏，直到悬停（如果可能的话，确保它作为另一个菜单捕捉到下拉菜单的右侧）。

非常感谢任何帮助。

Answer 1

正如BLOOD-BATH所说，使用＆＃34;＆gt;＆＃34;选择器以选择直接子项，这将有助于设置子菜单项的样式。例如：当您向#navbar > ul > li添加样式时，它会将样式应用于li项Food, Houseware, Toys。

要隐藏子菜单项的初始值，请创建子菜单项display:none并在悬停时将它们设为display:block。在子菜单项上使用position:absolute。

fiddle 可能会对您有所帮助。

HTML

<section id="navbar">
    <ul>
        <li><a href="#"> Food </a></li>
        <li><a href="#"> Houseware 
            <ul>
                <li><a href="#"> Breakfast </a></li>
                <li><a href="#"> Lunch </a></li>
                <li><a href="#"> Dinner </a></li>
                <li><a href="#"> Snacks </a>
                    <ul>
                        <li><a href="#">Orange</a></li>
                        <li><a href="#">Banana</a></li>
                        <li><a href="#">Apple</a></li>
                    </ul>
                </li>
            </ul>
            </a></li>
        <li><a href=#> Toys </a></li>
    </ul>
</section>

CSS

ul{
    list-style:none;
    padding:0;
}

ul li{
    position:relative;
}

#navbar > ul > li{
    display:inline-block;
    background-color: #ccc;
}

#navbar ul ul{
    display:none;
    position:absolute;
    top:100%;
    background-color:#fadde8;
}

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

#navbar ul ul ul{
    top:0;
    left:100%;
    background-color:#71efd3;
}

Answer 2

> selector就是您所需要的。它选择元素的指定子元素，在本例中为 li 的 ul 子元素。

li>ul{
  display:none;
}
li:hover>ul{
  display:block;
}

Answer 3

除了其他答案之外，您犯的另一个错误是您未能关闭＆lt; a＆gt;在第二个列表之前的标记，也是＆lt; / li＆gt;是折旧的，您的代码是不必要的。如果你可以帮助我，我试图制作一个列表而不是向下，向右移动，就像你瞄准列表中的第二个选项，但是对于所有选项。

创建菜单等层次结构

3 个答案: