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中的下拉菜单

回答

相关问题