如何制作悬停菜单栏？

Question

如何在CSS中制作悬停菜单栏？所以如果我带着鼠标回家，信息、爱好和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>

Answer 1

你可以这样做：

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;
}

<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>

这里的演示

Answer 2

只需使用此css：

ul>li{
  display:none;
}

ul:hover li{
  display:block;
}

演示

Answer 3

试试这个也许会有帮助

<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>

风格各异

<style>
#menu-bar li ul
{
display:none;
}
#menu-bar li:hover ul
{
display:inline-block;
position:absolute;
}
</style>