為什么這個 css 的下拉菜單不起作用？
[英]Why do this css for a dropdown doesn't work?
問題描述
我試圖做一個下拉菜單，但nav ul li:hover > ul沒有字，我不知道為什么請幫忙
css
<body>
<header>
<!-- menu -->
<nav id="nav">
<li class="dropdown"><a href="#">Chapters</a></li>
<ul>
<li><a href="#">chapter.1</a></li>
<li><a href="#">chapter.2</a></li>
</ul>
</li>
</nav>
</header>
</body>
html
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover > ul {
display: inherit;
}
2 個解決方案
解決方案1
0 2020-12-20 13:56:31
您的 HTML 無效， li必須是ul的直接孩子。 您的第一個li不在 ul` 中。
其次，您的子菜單應該在li里面，而不是在它之后
nav ul ul { display: none; position: absolute; } nav ul li:hover>ul { display: inherit; }
<header> <.-- menu --> <nav id="nav"> <ul> <li class="dropdown"><a href="#">Chapters</a> <ul> <li><a href="#">chapter.1</a></li> <li><a href="#">chapter.2</a></li> </ul> </li> </ul> </nav> </header>
解決方案2
-1 2020-12-20 13:50:22
我為你修好了。 您的CSS selector錯誤。 請參閱更新的答案。
還，
- li 只能在
ul或ol中使用，因此請在 HTML 代碼中修復此問題。
nav ul ul { display: none; position: absolute; } nav ul li:hover + ul { display: inherit; }
<body> <header> <.-- menu --> <nav id="nav"> <ul> <li class="dropdown"><a href="#">Chapters</a></li> <ul> <li><a href="#">chapter.1</a></li> <li><a href="#">chapter.2</a></li> </ul> </li> </ul> </nav> </header> </body>
CSS下拉菜單，浮動重置無效，為什么？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.