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）上运行...不确定它们如何处理：悬停选择器或甚至是否可以。

Answer 2

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

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

使用上面的代码

当你将鼠标悬停在.nav-item上时，

隐藏了这个li，它将显示隐藏的li

html css基本导航菜单无法悬停

2 个答案: