我正在为我的网站设计一个水平导航栏，点击 在顶 Angular 的按钮上，
出现其他选项，
然后将鼠标悬停在其他选项上时，会出现更多选项:
但是，如屏幕截图所示，“Option”、“Option2”和“Option3”并不相互内联，这正是我想要实现的目标。这是 HTML:
#menu{
}
#ulmain{
}
#limain{
list-style:none;
}
#ulsub {
visibility:hidden;
}
#lisub{
list-style:none;
display:inline;
}
#ulmain:hover #ulsub{
visibility:visible;
}
#ulsubsub {
visibility:hidden;
}
#lisub:hover #ulsubsub{
visibility:visible;
}
#lisubsub{
list-style:none;
display:inline;
}
#menu a{
background-color:pink;
text-decoration:none;
}
#ulmain, #ulsub{
display:inline;
} <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<title>New Menu</title>
</head>
<body>
<div id="menu">
<ul id="ulmain">
<li id="limain"><a id="amain" href="#">Menu</a>
<ul id="ulsub">
<li id="lisub"><a id="asub" href="#">Option</a>
<ul id="ulsubsub">
<li id="lisubsub"><a href="#">Sub-Option</a></li>
<li id="lisubsub"><a href="#">Sub-Option2</a></li>
</ul>
</li>
<li id="lisub"><a href="#">Option2</a>
<ul id="ulsubsub">
<li id="lisubsub"><a href="#">Sub-Option3</a></li>
<li id="lisubsub"><a href="#">Sub-Option4</a></li>
</ul>
</li>
<li id="lisub"><a href="#">Option3</a>
<ul id="ulsubsub">
<li id="lisubsub"><a href="#">Sub-Option5</a></li>
<li id="lisubsub"><a href="#">Sub-Option6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>如何内嵌“Option”、“Option2”和“Option3”？谢谢。
最佳答案
试试这个 CSS
#menu{
}
#ulmain{
}
#limain{
list-style:none;
}
#ulsub {
visibility:hidden;
}
#lisub{
list-style:none;
display:inline-block;
}
#ulmain:hover #ulsub{
visibility:visible;
}
#ulsubsub {
visibility:hidden;
}
#lisub:hover #ulsubsub{
visibility:visible;
}
#lisubsub{
list-style:none;
display:inline-block;
}
#menu a{
background-color:pink;
text-decoration:none;
}
#ulmain, #ulsub{
display:block;
}
非常相似，您将 ul 设置为内联显示，将它们设置为阻塞，并将 li 设置为显示:内联 block ；
希望这有助于...
关于html - 水平导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44864014/