列表元素重疊

Question

我遇到了水平菜單欄列表項重疊的問題。

因此nav div元素的ul ul li重疊，我能做些什麼來阻止它？

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

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不包裹在兩行文字：

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

Answer 2

嘗試這樣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 3

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

<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>