CSS中的下拉菜單

我試圖在純CSS中構建一個下拉式多級導航菜單欄。下面是代碼（我知道這原來醜）：CSS中的下拉菜單

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Menu</title> 
<style> 
* { 
    margin: 0; 
    padding: 0 
} 
ul { 
    list-style: none 
} 
li { 
    float: left; 
    width: 120px; 
    height: 20px; 
    background: pink 
} 
li > ul { 
    display: none 
} 
li:hover > ul { 
    display: block; 
    position: relative; 
    top: -20px; 
    left: 120px; 
    background: red 
} 
#nav > li:hover > ul { 
    top: 0px; 
    left: 0px 
} 
li:hover { 
    background: red 
} 
</style> 
</head> 
<body> 
<ul id="nav"> 
    <li>1 
    <ul> 
    <li>1.1 
    <ul> 
     <li>1.1.1 
     <ul> 
     <li>1.1.1.1</li> 
     <li>1.1.1.2</li> 
     <li>1.1.1.3</li> 
     <li>1.1.1.4</li> 
     </ul> 
     </li> 
     <li>1.1.2</li> 
     <li>1.1.3</li> 
    </ul> 
    </li> 
    <li>1.2</li> 
    <li>1.3</li> 
    <li>1.4</li> 
    <li>1.5</li> 
    </ul> 
    </li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 
</body> 
</html>

的代碼運行正常Firefox20下，但在IE10它是關閉的1px的了，在Chrome26它是關閉的1px的下降。我認爲這是因爲瀏覽器呈現不同的列表佈局。任何幫助，將不勝感激！

jsFiddle Demo

來源

2013-04-09 Kamarkaka

看看http://cssmenumaker.com/一些看法/靈感，.. – lukeocom 2013-04-09 03:31:08

@lukeocom感謝您的回覆。其實我做了和你提供的鏈接類似的東西。但是他們只接受一層或兩層子菜單。這一次，我正在嘗試爲子菜單的任何圖層提供一個通用解決方案，這可能不那麼漂亮，但對我很有挑戰:) – Kamarkaka 2013-04-09 03:39:19

是的，我也注意到了。我用一個網站來生成一個多層次的CSS菜單。我會再次嘗試找到該網站併發布鏈接。由此產生的菜單不像上面的鏈接那樣漂亮，但CSS是。 – lukeocom 2013-04-09 04:50:30

我會建議開始復位樣式表，讓你清楚的任何瀏覽器設置樣式。然後每個瀏覽器將從一個平坦的遊戲場開始。瀏覽器不會以不同的方式呈現列表。

有關復位樣式表的詳細信息請參見http://meyerweb.com/eric/tools/css/reset/

來源

2013-04-09 02:50:08 netdiva

感謝您的回覆。其實「線條高度」造成了這個問題。 – Kamarkaka 2013-04-09 03:05:40

CSS中的下拉菜單

回答

相關問題