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基本導航菜單不工作懸停

回答

相關問題