Html 影响父高度的CSS嵌套列表

在下面的代码片段中，我有一个使用嵌套列表的CSS菜单。我遇到的一个问题是，当您将鼠标悬停在第二个列表项上时，它会显示嵌套列表，但在此过程中，会增加父列表的高度，从而向下推其他所有内容

我知道我可以使用

absolute

的位置，但是这会导致嵌套列表不在其父元素下面的问题，并使我可能需要的每个嵌套列表的样式都非常烦人

是否有一种简单的方法可以解决我的问题，同时保持嵌套循环位于其父循环的下方（并扩展为使用

：hover

）

*{
保证金：0；
填充：0；
}
导航ul{
列表样式类型：无；
背景：#000；
文本对齐：居中；
}
李国荣{
显示：内联块；
}
海军ulli a{
显示：内联块；
填充：20px；
颜色：#fff；
文字装饰：无；
}
导航ulli a：悬停{
背景色：#3ab795；
文字装饰：下划线；
}
导航ul li>ul{
显示：无；
位置：相对位置；
左：50px；
边框：1px实心#fff；
}
导航ul li>ul li{
显示：块；
颜色：#fff；
}
导航ul li：悬停>ul{
显示：块；
}

我希望您的问题在下面的小提琴中得到解决。试试看

*{
保证金：0；
填充：0；
}
导航ul{
列表样式类型：无；
背景：#000；
文本对齐：居中；
}
李国荣{
显示：内联块；
位置：相对位置；
}
海军ulli a{
显示：内联块；
填充：20px；
颜色：#fff；
文字装饰：无；
}
导航ulli a：悬停{
背景色：#3ab795；
文字装饰：下划线；
}
导航ul li>ul{
显示：无；
位置：绝对位置；
左：50px；
最高：100%；
边框：1px实心#fff；
}
导航ul li>ul li{
显示：块；
颜色：#fff；
}
导航ul li：悬停>ul{
显示：块；
}

我希望您的问题在下面的小提琴中得到解决。试试看

*{
保证金：0；
填充：0；
}
导航ul{
列表样式类型：无；
背景：#000；
文本对齐：居中；
}
李国荣{
显示：内联块；
位置：相对位置；
}
海军ulli a{
显示：内联块；
填充：20px；
颜色：#fff；
文字装饰：无；
}
导航ulli a：悬停{
背景色：#3ab795；
文字装饰：下划线；
}
导航ul li>ul{
显示：无；
位置：绝对位置；
左：50px；
最高：100%；
边框：1px实心#fff；
}
导航ul li>ul li{
显示：块；
颜色：#fff；
}
导航ul li：悬停>ul{
显示：块；
}

使用子菜单的绝对位置无需担心。让父母成为相对人。根据你的密码

nav ul li {
    display: inline-block;
    position: relative; // Added
}

然后像这样修改嵌套的ul

nav ul li > ul {
    display: none;
    position: absolute; // Added
    left: 0; // Changed
    border: 1px solid #fff;
    width: 160px; // Change as per your requirement
}

---

使用子菜单的绝对位置无需担心。让父母成为相对人。根据你的密码

nav ul li {
    display: inline-block;
    position: relative; // Added
}

然后像这样修改嵌套的ul

nav ul li > ul {
    display: none;
    position: absolute; // Added
    left: 0; // Changed
    border: 1px solid #fff;
    width: 160px; // Change as per your requirement
}

---

为此，您需要理解的概念。对于下拉菜单使用

位置：绝对

，对于父菜单使用

位置：相对

。无需为每个下拉菜单编写css

*{
保证金：0；
填充：0；
}
导航ul{
列表样式类型：无；
背景：#000；
文本对齐：居中；
}
李国荣{
显示：内联块；
位置：相对位置；
}
海军ulli a{
显示：内联块；
填充：20px；
颜色：#fff；
文字装饰：无；
}
导航ulli a：悬停{
背景色：#3ab795；
文字装饰：下划线；
}
导航ul li>ul{
显示：无；
位置：绝对位置；
最高：100%；
左：0px；
边框：1px实心#fff；
最小宽度：150px；
}
导航ul li>ul li{
显示：块；
颜色：#fff；
}
导航ul li：悬停>ul{
显示：块；
}

为此，您需要理解的概念。下拉菜单使用

位置：绝对

，父菜单使用

位置：相对

。无需为每个下拉菜单编写css

*{
保证金：0；
填充：0；
}
导航ul{
列表样式类型：无；
背景：#000；
文本对齐：居中；
}
李国荣{
显示：内联块；
位置：相对位置；
}
海军ulli a{
显示：内联块；
填充：20px；
颜色：#fff；
文字装饰：无；
}
导航ulli a：悬停{
背景色：#3ab795；
文字装饰：下划线；
}
导航ul li>ul{
显示：无；
位置：绝对位置；
最高：100%；
左：0px；
边框：1px实心#fff；
最小宽度：150px；
}
导航ul li>ul li{
显示：块；
颜色：#fff；
}
导航ul li：悬停>ul{
显示：块；
}

这很有效，但是我确实需要将

宽度：最大内容添加到
导航ul li>ul li
（这不是问题）Cheers@spedwards这很有效，但是我确实需要将
宽度：最大内容添加到
导航ul li>ul li
（这不是问题）Cheers@spedwards请相信我说我曾经取消过