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

标签 html css

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 7 年前

如何在 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>

DEMO HERE

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

上一篇:css - 响应式菜单仅使用 "nav"和 "a"标签(无 "ul")

下一篇:html - 如何使列表在三个图像之间的导航中居中?

相关文章:

javascript - HTML、CSS 和 JS 动画多个进度条

html - 在 HTML 表格中显示的 Highcharts

html - 鼠标悬停不会在旋转的 div 上注册

html - Border Right 设置在页面的对面

javascript - 如何使用 Vuejs 前端框架使用 MySQL/PHP 从服务器获取数据

jquery - 如何选择容器中的可见元素?

javascript - 如何切换事件标签?

javascript - jquery - 用颜色选择器中的颜色填充 div

jquery - 对除一个元素之外的所有元素应用过滤器

html - 如果内容超出html,如何显示点(....)