html的CSS基本导航菜单不工作悬停

我只是想让这个导航正常工作。html的CSS基本导航菜单不工作悬停

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

当我将鼠标悬停在“菜单”上时，我想要早餐午餐和晚餐弹出。当我使用display:none;设计<ul>时，它永远不会出现，否则它会一直显示......谢谢。

一些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;}

来源

2014-08-29 Sp0cK

大家都觉得自己像个白痴一天:) – Abhi 2014-08-29 05:55:43

你'称号''属性有未封闭的字符串。您的CSS中没有'：hover'规则，那么您如何获得悬停效果？ – 2014-08-29 05:57:38

让一个jsfiddle（www.jsfiddle.net） – 2014-08-29 05:58:02

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

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

使用本李时珍在

上面的代码是隐藏的，当你悬停在.nav项，它会显示隐藏的李

来源

2014-08-29 07:51:18 himanshu

添加到您的CSS：http://jsfiddle.net/jntahqkh/：

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

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

我用你的代码在这里做出了表率。 position: absolute;应该保持子菜单不会干扰您网站上的其他内容。您可能需要稍微玩一下才能让它在您的网站上正确显示，但这至少应该让您走上正确的道路。此外，这可能不适用于移动设备（Android/iOS）......不知道它们是如何处理的：悬停选择器或者甚至是它们。

来源

2014-08-29 06:03:48

欢呼的队友，himanshu的“李”做的伎俩:) – Sp0cK 2014-08-29 09:16:33

html的CSS基本导航菜单不工作悬停

回答

相关问题