CSS下拉菜單奇怪的行爲

Question

我想創建一個純粹的CSS菜單，但我不知道我做錯了什麼。問題是，當我將鼠標懸停在父元素上時，子列表將打開「內部」，這種類型會打開另一個框，並將所有其他父母推下。我知道的話不這樣做的情況下公正，所以我會很感激，如果有人可以嘗試了這一點，並告訴我，什麼是錯的：

<ul class="navigation"> 
    <li><a href="#">Employees</a> 
    <ul> 
     <li><a href="#">Add new</a></li> 
     <li><a href="#">Edit details</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Attendance</a> 
    <ul> 
     <li><a href="#">View report</a></li> 
     <li><a href="#">Upload attendance</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Broadcast</a> 
     <ul> 
     <li><a href="#">To all</a></li> 
     <li><a href="#">To Managers</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Log out</a></li> 
</ul> 

而CSS：

/* Begin styling navigation */ 

.navigation { 
    text-align: center; 
    margin: 20px auto; 
} 

.navigation li a { 
    color: white; 
    text-decoration: none; 
} 

.navigation li { 
    list-style-type: none; 
    background-color: #ff6600; 
    padding: 5px; 
} 

.navigation ul { 
    display: none; 
} 

.navigation > li { 
    display: inline-block; 
} 

.navigation li:hover { 
     background-color: #aaa; 
} 

.navigation li:hover > ul { 
    display: block; 
} 

/* End styling navigation */ 

Answer 1

您需要添加position: absolute到.navigation li:hover > ul的CSS是這樣的：

.navigation li:hover > ul { 
    display: block; 
    position: absolute; 
} 

---

.navigation { 
 
    text-align: center; 
 
    margin: 20px auto; 
 
} 
 

 
.navigation li a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
.navigation li { 
 
    list-style-type: none; 
 
    background-color: #ff6600; 
 
    padding: 5px; 
 
} 
 

 
.navigation ul { 
 
    display: none; 
 
} 
 

 
.navigation > li { 
 
    display: inline-block; 
 
} 
 

 
.navigation li:hover { 
 
     background-color: #aaa; 
 
} 
 

 
.navigation li:hover > ul { 
 
    display: block; 
 
    position: absolute; 
 
    padding-left: 0px; 
 
}

<ul class="navigation"> 
 
    <li><a href="#">Employees</a> 
 
    <ul> 
 
     <li><a href="#">Add new</a></li> 
 
     <li><a href="#">Edit details</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Attendance</a> 
 
    <ul> 
 
     <li><a href="#">View report</a></li> 
 
     <li><a href="#">Upload attendance</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Broadcast</a> 
 
     <ul> 
 
     <li><a href="#">To all</a></li> 
 
     <li><a href="#">To Managers</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Log out</a></li> 
 
</ul>