html css 基本导航菜单在悬停时不起作用

Question

我只想让这个导航正常工作。

<li class="nav-item" data-magellan-arrival="restaurant-menu" title="Restaurant Menu><a     class="scroll" href="#restaurant-menu">Menu </a>
  <ul>
    <li><a href="#">Breakfast</a></li>
    <li><a href="#">Lunch</a></li>
    <li><a href="#">Dinner</a></li>
  </ul>
</li>

当我将鼠标悬停在“菜单”上时，我希望早餐午餐和晚餐弹出。当我为 <ul> 设置样式时与 display:none;它永远不会出现，否则它会一直显示...谢谢。

一些CSS:

.nav-bar > li {
  float: left;
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  line-height: 39px;}

ul.flyout, .nav-bar li ul {
  padding: 0;
  list-style: none;}

.top-bar ul {
  margin-left: 0;
  display: inline;
  height: 45px;
  line-height: 10px;
  list-style: none;}

Answer 1

将此添加到您的 CSS:

.nav-item > ul {
  display: none;
}

.nav-item:hover > ul {
  display: block;
  position: absolute;
}

我在这里使用您的代码做了一个例子:http://jsfiddle.net/jntahqkh/ . position: absolute; 应该防止子菜单干扰您网站上的其他内容。您可能需要稍微尝试一下才能让它在您的站点中正确显示，但这至少应该让您走上正确的道路。此外，这可能不适用于移动设备 (Android/iOS)...不确定它们如何处理 :hover 选择器，或者它们是否可以。