Абсолютное положение вложенной ul

Question

Я пытаюсь построить горизонтальное меню. Я хочу абсолютное позиционирование второго уровня:

Родитель 1 | Parent 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> 

Здесь КСС:

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