為什么我的子菜單在 html css 中不起作用

Question

我已經創建了我的導航欄，它工作正常，但現在我嘗試在我的導航欄中添加子菜單，但它在懸停時不顯示子菜單。 請檢查並糾正我。

首先我在我的<li>標簽中添加了<ul>然后我添加了 css 來隱藏嵌套的<ul>然后我嘗試在懸停<li>上顯示<ul> <li>

 *{ margin: 0; padding: 0; } nav{ background-color: red; } ul{ background-color: purple; width: 50%; } nav ul li { list-style: none; padding: 5px; display: inline-block; } nav ul li a{ text-decoration: none; color:black; font: bold 12px Arial; } nav ul li:hover{ background-color: blue; color: red; } nav ul li:hover a{ color: red; } ul li ul { display: none; position:absolute; } nav ul li:hover ul { display:block; }

 <nav> <ul> <li> <a href="">Home</a></li> <li> <a href="">About Us</a></li> <li> <a href="">Contact Us</a></li> <li> <a href="">Privacy Policy</a></li> <li> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> </ul> </li> </ul> </nav>

Answer 1

看起來您的<li>包裝不正確！

這是小提琴

在Privacy Policy您創建了另一個不需要的<li> 。 你必須用privacy policy標簽包裝子菜單，而不是一個新標簽，這就是為什么 css 沒有按預期顯示數據的原因之一，你幾乎就在那里關於CSS我剛剛為你修復了它！ 希望能幫助到你。

 * { margin: 0; padding: 0; } nav { height: 30px; } nav ul { display: block; position: relative; z-index: 100; } nav ul li { float: left; list-style: none; margin: 0; padding: 0; } nav ul li ul { display: none; } nav ul li a { width: 100px; height: 30px; display: block; text-decoration: none; text-align: center; line-height: 30px; background-color: black; color: white; } nav ul li a:hover { background-color: red; } nav ul li:hover ul { position: absolute; top: 30px; display: block; width: 100px; } nav ul li:hover ul li { display: block; }

 <nav> <ul> <li> <a href="#">Home</a></li> <li> <a href="#">About Us</a></li> <li> <a href="#">Contact Us</a></li> <li> <a href="#">Privacy Policy</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </nav>

Answer 2

為什么不從這個工作片段開始並嘗試根據您的需要更改數據:)

HTML 子導航

Answer 3

 *{ margin: 0; padding: 0; } nav{ background-color: red; } ul{ background-color: purple; width: 50%; } nav ul li { list-style: none; padding: 5px; display: inline-block; } nav ul li a{ text-decoration: none; color:black; font: bold 12px Arial; } nav ul li:hover{ background-color: blue; color: red; } nav ul li:hover a{ color: red; } ul li ul { display: none; position:absolute; } nav ul li:hover ul { display:block; }

 <nav> <ul> <li> <a href="">Home</a></li> <li> <a href="">About Us</a></li> <li> <a href="">Contact Us</a></li> <li> <a href="">Privacy Policy</a></li> <li> <a href="">test</a> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> </ul> </li> </ul>

Answer 4

您必須在您創建的子導航中添加一個錨標記。 因為目前這些子選項卡已創建但不與任何超級選項卡相關聯。

<a href="">Subnav</a>

因此，將其添加到您的子導航代碼上方。 你已准備好出發。