Html 列表元素重叠

我的水平菜单栏列表项重叠有问题

那么

nav div

元素的

ul li

重叠，我该怎么做才能阻止重叠

CSS:

body，html{
填充：0px；
边际：0px；
}
.导航{
字体系列：“PT Sans”，无衬线；
宽度：100%；
颜色：#F5；
背景：1565c0；
显示器：flex；
高度：40px；
填充：0；
保证金：0；
边界：0；
}
.nav ul、.nav ul li、.nav{
列表样式：无；
保证金：0；
填充：0；
边框底部：3px实心#0d47a1；
}
李国荣先生{
背景：1565c0；
宽度：自动；
位置：相对位置；
过渡：背景250ms缓进；
线高：40px；
显示：块；
}
.nav ul li:悬停{
背景：#0d47a1；
}
美国海军{
溢出：可见；
位置：绝对位置；
可见性：隐藏；
最高：100%；
宽度：0%；
}
李国荣先生{
边界：无；
显示：块；
位置：绝对位置；
左：0；
边际：0px；
}
.nav ul li：悬停>ul{
能见度：可见；
}
.导航a{
文字装饰：无；
颜色：继承；
利润率：0px 20px；
}
最后一个孩子{
边框底部：3px实心#0d47a1；
}

你好，这里是令人敬畏的地方
棒极了

像这样尝试

CSS:

.nav ul li > ul {
    position: relative;
    display:none;
}
.nav ul ul li {
    border:none;
    display:block;
    position: relative;
    left:0;
    margin:0px;
}
.nav ul li:hover>ul {
    display:block;
}

下面是对代码的一些修改：

.nav ul ul li {
    border: medium none;
    display: block;
    /*left: 0;*/
    margin: 0;
    /*position: absolute;*/
}
.nav ul ul {
    overflow: visible;
    position: absolute;
    top: 100%;
    visibility: hidden;
    /*width: 0;*/
}

您可以在下面添加css，以不将文本换行为两行：

.nav ul ul {
    white-space: nowrap;
}

body，html{
填充：0px；
边际：0px；
}
.导航{
字体系列：'PT Sans'，Sans serif；
宽度：100%；
颜色：#F5；
背景：1565c0；
显示器：flex；
高度：40px；
填充：0；
保证金：0；
边界：0；
}
.nav ul、.nav ul li、.nav{
列表样式：无；
保证金：0；
填充：0；
边框底部：3px实心#0d47a1；
}
李国荣先生{
背景：1565c0；
宽度：自动；
位置：相对位置；
过渡：背景250ms缓进；
线高：40px；
显示：块；
}
.nav ul li:悬停{
背景：#0d47a1；
}
.nav ul li>ul{
位置：相对位置；
显示：无；
}
李国荣先生{
边界：无；
显示：块；
位置：相对位置；
左：0；
边际：0px；
}
.nav ul li：悬停>ul{
显示：块；
}
.导航a{
文字装饰：无；
颜色：继承；
利润率：0px 20px；
}
最后一个孩子{
边框底部：3px实心#0d47a1；
}

你好

这就是令人敬畏的地方

棒极了

为什么您在li内部再次使用ul。。请检查一下html标签。如果你仔细看，可能会有帮助，它是一个下拉菜单，所以它是另一个列表中的一个列表。嗯，是的，但是答案已经被选中了。你也没有解释你做了什么，所以我什么也没学到。