嵌套ul的絕對位置

Question

我嘗試構建一個水平菜單。我想要二級絕對定位：

父母1 | 父母2 |家長3

孩子2.1 |孩子2.2

它在Firefox中工作，但不在IE 8中，填充頂部在那裏被忽略，第二行與第一行重疊。

這裏是小提琴：

http://jsfiddle.net/oe8wksax/

下面是標記：

<ul id="#top" class='nav'> 
    <li><a href='#'>Parent 1</a> 
     <ul> 
      <li><a href='#'>Child 1.1</a></li> 
      <li><a href='#'>Child 1.2</a></li>    
     </ul> 
    </li> 
    <li><a href='#'>Parent 2</a> 
     <ul style="display:block"> 
      <li><a href='#'>Child 2.1</a></li> 
      <li><a href='#'>Child 2.2</a></li> 
     </ul> 
    </li> 
    <li><a href='#'>Parent 3</a> 
     <ul> 
      <li><a href='#'>Child 3.1</a></li> 
      <li><a href='#'>Child 3.2</a></li> 
     </ul> 
    </li> 
<ul> 

這裏的CSS：

nav, .nav ul 
{ 
list-style:none; 
clear: both;  
} 
.nav > li 
{ 
float:left; 
margin-right:10px; 
} 
.nav ul 
{ 
position:absolute; 
left:5px; 
display:none; 
padding-top:5px; 
} 

Answer 1

試試這個。

.nav, .nav ul 
{ 
    list-style:none; 
    clear: both;  
} 
.nav{position:relative;padding: 0;} 
.nav > li{margin-right: 15px;} 
.nav ul li{margin-right: 10px;} 
.nav > li,.nav ul li 
{ 
    float:left; 
} 

.nav ul 
{ 
    position:absolute; 
    display:none; 
    top: 25px; 
    left: 0; 
    padding: 0; 
    width: 100%; 
}