我试图在纯 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。我认为这是因为浏览器呈现列表布局的方式不同。任何帮助，将不胜感激！