Css 导航栏-子元素不继承宽度和重叠

因此，我正在学习CSS并尝试构建自己的导航栏，但我在对齐孩子们时遇到了一些困难

基本上有两个问题：

元素重叠

子元素栏没有采用父元素栏的宽度。下图可以说明这两个问题：

顺便说一句，如果你们能看到我的代码在我上面提到的问题之外的问题，请随意指出

代码如下：

正文{
背景色：rgb（210210）；
边际：0px；
填充：0px；
}
导航{
背景色：rgb（97,97,97）；
填充顶部：10px；
垫底：10px；
左侧填充：10px；
右边填充：10px；
显示器：flex；
}
#标志{
宽度：20%；
身高：继承；
浮动：左；
清除：左；
}
#标志p{
/*字体系列：“投石机MS”、“Lucida Sans Unicode”、“Lucida Grande”*/
字体大小：120%；
颜色：白色；
左侧填充：40px；
}
#超链接{
宽度：80%；
浮动：对；
文本对齐：右对齐；
}
#超链接{
填充内联开始：0；
}
#超链接li{
显示：内联块；
右边填充：50px；
右边距：10px；
填充顶部：10px；
垫底：10px；
}
#超链接a{
字号：1.2rem；
文本对齐：居中；
文字装饰：无；
颜色：白色；
右侧填充：5px；
}
#超链接>ul>li>a{
右边框：纯白3px；
}
#超链接>ul>li:悬停{
背景色：rgb（27、129、107）；
边界半径：0 10px 0；
}
#超链接ul-li-li：悬停{
背景色：rgb（27、129、107）；
}
#超链接{
显示：无；
}
#超链接李：悬停{
显示：块；
位置：绝对位置；
宽度：继承；
}
#超链接李：鼠标悬停李{
显示：块；
背景色：rgb（97,97,97）；
}
部分{
填充：0.10%；
}

导航栏3
MySite.com




















试验
你好，这只是个测试。Lorem ipsum dolor sit amet，奉献精英。奎亚，暂时的，过失的

Lorem ipsum dolor sit amet，奉献精英。奎亚，暂时的，罪过！它阻碍了人们对奎斯夸姆的理解。因此，我们有责任、理性、选择权，而不是共同利益

使用

宽度：100%

而不是

宽度：继承

，并使用绝对定位子菜单

ul

上的

top:XXpx

设置将其相对于其父菜单向下移动

---

（不要忘记绝对定位元素的父元素需要有

位置：relative

，才能作为其子元素的锚。）

嘿，首先，谢谢！！所以我改变了#超链接li:hover ul{top:68px；display:block；position:absolute；width:100%；}解决了重叠的问题，但是width 100%并没有解决另一个问题=（我也不太明白应该在哪里插入“position:relative”元素。

position:relative

应应用于包含

ul

子菜单的

li

主导航项。因此，这将是

#超链接>ul>li{position:relative；}