Html 下拉菜单的问题

我使用有序列表创建菜单，我遇到了两个问题，下拉列表不对齐，悬停效果应用于下拉列表，我不希望发生这种情况

这是一把JS小提琴：

这是我的HTML代码：

<div id="menu">
    <ul id="navigation">
    <li><a href="index.html">Home</a></li>
          <li><a href="">Services</a>
            <ul>
            <li><a href="">Residential</a></li>
            <li><a href="">Buisiness</a></li>
            </ul>
          </li>
          <li><a href="#">Contact</a></li>
    </ul>
    </div>

---

为了使宽度相同，您需要实际设置子菜单的宽度（不一定是静态的），但如果允许，它将扩展到明显不需要的内容大小，CSS更改如下所示：

#navigation li{
    float: left;
    position:relative;
}

#navigation li:hover ul {
    display: block;
    position: absolute;
    width: 100%;
}

position:relative

子菜单知道在确定100%宽度而不是body标签时使用该元素

至于显示在子菜单项上的悬停效果，您需要做的只是在选择器中更加具体。您正在使用的空格表示您将选择

#navigation

的子元素，该元素是

li

元素。这包括子菜单。如果您使用像

>

这样的选择器，它表示直接子菜单项，那么您将能够在仅针对顶级菜单项时进行更具体的选择。CSS看起来像：

#navigation > li > a:hover{
    color: #FF6987;
    background-color: #f2f2f2; 
    box-shadow: inset 0 8px 6px -6px black;
}

---

CSS选择器的一个很好的参考：

因此，如果我只想将CSS应用于子项，我会使用相同的系统？对，我会给子菜单

UL

提供一个类，然后选择该子菜单的

li

子项来提供样式

#navigation > li > a:hover{
    color: #FF6987;
    background-color: #f2f2f2; 
    box-shadow: inset 0 8px 6px -6px black;
}