html - 如何制作悬停菜单栏？

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        4年前关闭。
                                                                                            
                
        
如何在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>

最佳答案

你可以这样做：

的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

关于html - 如何制作悬停菜单栏？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34041582/