Html 为什么将鼠标悬停在一个li元素上时，嵌套的ul元素会拖累整个li元素

这是一个由两部分组成的问题第一部分是我将鼠标悬停在应该显示嵌套ul元素的li元素上时遇到的问题。它将其余的li标记放在嵌套ul元素的底部。我不知道我做错了什么，但它将初始li元素向下推。我希望有人能解释我做错了什么

我的第二个问题是如何创建对其具有悬停效果的li元素，而不是任何嵌套的li元素？我想创建一个菜单列表，当您将鼠标悬停在它上面时，可以更改文本的颜色，但我不希望嵌套的li元素也具有悬停效果

HTML

---

对于问题1将

垂直对齐：顶部

添加到您的

li

li {
    list-style: none;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;

  &:hover ul {
        display: block;
    }
 }

对于问题2使用子对象而不是Decentant选择器。例如：

> li:nth-child(1)>a:hover {
    color: $red;
}

---

请参阅：

问题1将

垂直对齐：顶部

添加到您的

li

li {
    list-style: none;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;

  &:hover ul {
        display: block;
    }
 }

对于问题2使用子对象而不是Decentant选择器。例如：

> li:nth-child(1)>a:hover {
    color: $red;
}

---

请参阅：

首先，您已经在#container

#container ul{position:relative；}

下为

ul

使用了全局css。此css将应用于

#container

中的每个子

ul

及其覆盖

。列出内联ul{position absolute}

，您需要设置直接子选择器css

#container>ul{position:relative；}

对于第二个ans，您需要做同样的事情，使用

立即子选择器css

---

首先，您已经在#container

#container ul{position:relative；}

下为

ul

使用了全局css，该css将应用于

#container

中的每个子

ul

及其覆盖

。列出内联ul{position absolute}

，您需要设置直接子选择器css

#container>ul{position:relative；}

对于第二个ans，您需要做同样的事情，使用

立即子选择器css

---

它工作得很好。你必须增加李的宽度

.list-inline li {
   min-width: 110px;
}

及

演示

 https://codepen.io/Dhaarani/pen/vXpONj

---

它工作得很好。你必须增加李的宽度

.list-inline li {
   min-width: 110px;
}

及

演示

 https://codepen.io/Dhaarani/pen/vXpONj

---

请一次只问一个问题。请一次只问一个问题。谢谢，我不知道这个“>”会抓住父母的直系子女。我想我会用这些信息编写得更好谢谢，我不知道这个“>”会抓住父母的直系子。我想我会用这个更好地编写代码information@black_yurizan检查这个。@black_yurizan检查这个。