<分区>
如何在 CSS 中制作悬停菜单栏?因此,如果我将鼠标悬停在主页上,就会弹出 informatica、hobby 和 ik。
<div class="menu">
<ul id="menu-bar">
<nav>
<li><a href="index.html">Home</a></li>
<ul>
<li><a href="#">Informatica</a></li>
<li><a href="#">Hobby</a></li>
<li><a href="#">Ik</a></li>
</ul>
</li>
</nav>
</div>
</div>
最佳答案
你可以这样做:
CSS
ul {
list-style: none;
margin: 0;
}
ul ul {
display: none;
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
position: relative;
}
ul ul li {
display: block;
}
ul li:hover ul {
display: block;
}
HTML
<div class="menu">
<nav>
<ul id="menu-bar">
<li><a href="index.html">Home</a>
<ul>
<li><a href="#">Informatica</a></li>
<li><a href="#">Hobby</a></li>
<li><a href="#">Ik</a></li>
</ul>
</li>
</ul>
</nav>
</div>
关于html - 如何制作悬停菜单栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34041582/