列出元素重叠

Question

我的水平菜单栏列表项重叠了。

ul ul li元素的nav div重叠，我该怎么做才能阻止它？

The jsfiddle

CSS：

body, html{
padding: 0px;
margin: 0px;
}
.nav {
font-family: 'PT Sans', sans-serif;
width: 100%;
color: #F5F5F5;
background: #1565c0;
display: flex;
height: 40px;
padding: 0; 
margin: 0;
border: 0;
}
.nav ul, .nav ul li, .nav{
list-style: none;
margin: 0; 
padding: 0;
border-bottom: 3px solid #0d47a1;
}
.nav ul li{
background: #1565c0;
width:auto;
position: relative;
transition: background 250ms ease-in;
line-height: 40px;
display:block;
}
.nav ul li:hover{
background: #0d47a1;
}
.nav ul ul{
overflow:visible;
position: absolute;
visibility: hidden;  
top: 100%; 
width: 0%;
}
.nav ul ul li{
border:none;
display:block;
position: absolute;
left:0;
margin:0px;
}
.nav ul li:hover>ul{
visibility: visible; 
}
.nav a{
text-decoration: none;
color: inherit;
margin: 0px 20px;
}
.nav ul ul li:last-child{
border-bottom: 3px solid #0d47a1;
}

<div class="nav">
<ul>
<li><a>Hi there</a><ul><li><a>Here is the awesomeness</a></li><li><a>Awesome</a></li></ul></li>
</ul>
</div>

Answer 1

尝试这样 Demo

<强> 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;
}

Answer 2

fiddle以下是您的代码中的一些修改：

.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，不要将你的文字换成2行：

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

Answer 3

＆＃13;

＆＃13;

body, html {
    padding: 0px;
    margin: 0px;
}
.nav {
    font-family:'PT Sans', sans-serif;
    width: 100%;
    color: #F5F5F5;
    background: #1565c0;
    display: flex;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 0;
}
.nav ul, .nav ul li, .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 3px solid #0d47a1;
}
.nav ul li {
    background: #1565c0;
    width:auto;
    position: relative;
    transition: background 250ms ease-in;
    line-height: 40px;
    display:block;
}
.nav ul li:hover {
    background: #0d47a1;
}
.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 a {
    text-decoration: none;
    color: inherit;
    margin: 0px 20px;
}
.nav ul ul li:last-child {
    border-bottom: 3px solid #0d47a1;
}

＆＃13;

<div class="nav">
    <ul>
        <li><a>Hi there</a>

            <ul>
                <li><a>Here is the awesomeness</a>

                </li>
                <li><a>Awesome</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;