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>li{
  display:none;
}

ul:hover li{
  display:block;
}

Here is the JSFiddle demo

Answer 2

你可以这样做：

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

<强> DEMO HERE

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>

如何制作悬停菜单栏？

3 个答案: