嵌套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%;
}