我试图在纯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。我认为这是因为浏览器以不同的方式呈现列表布局。任何帮助将不胜感激!
答案 0 :(得分:0)
我建议从重置样式表开始,以便清除任何浏览器设置样式。然后每个浏览器将从均匀的游戏场开始。浏览器不会以不同方式呈现列表。
有关重置样式表的详细信息,请参阅http://meyerweb.com/eric/tools/css/reset/