css выпадающее меню продолжает расширяться Главная

Question

Я просто сделал свое первое выпадающее меню css, и я очень этому горжусь, но у меня проблема, когда подменю расширяется, оно тянет вниз по главной ul, и я не хочу этого .. он должен оставаться на высоте я даю его .. поэтому фиолетовый ДИВ ниже остается в том же месте, даже если подменю расширяется .. спасибо

Вот jsFiddle ссылка http://jsfiddle.net/v937B/71/

вот мой код

<ul class="menu">  
    <li> 
     <a href="#">Forside</a> 
    </li> 
    <li> 
     <a href="#">Nyheder</a> 
    </li> 
    <li> 
     <a href="#">Galleri</a> 
    </li> 
    <li> 
     <a href="#">Andet</a> 
    </li>  
    <li>Vores hunde 
     <ul class="submenu"> 
      <li> 
       <a href="#">Hvalpe</a> 
      </li> 
      <li> 
       <a href="#">Hanner</a> 
      </li> 
      <li> 
       <a href="#">Tæver</a> 
      </li> 
     </ul> 
    </li> 
</ul> 


<div style="float:left; width:100%; background:#FF00FF;">&nbsp;</div> 

и вот мой css

ul.menu{ 
text-align:center; 
display: table; 
width: 100%; 
height:48px; 
line-height:48px; 
border: 1px solid red; 
} 

ul.menu li { 
background:yellow; 
display: table-cell; 
border: 0px solid yellow; 
} 

ul.menu li a { 
display:block; 
background:blue; 
} 

ul.menu li a:hover { 
display:block; 
background:purple; 
} 

.submenu { 
display: none; 
} 

.menu li:hover .submenu { 
display: block; 
} 

ul.submenu { 
text-align:center; 
} 

ul.submenu li { 
display:block; 
text-align:center; 
background:green; 
border:0px; 
} 

ul.submenu li a { 
color:red; 
text-align:center; 
background:pink; 
} 

ul.submenu li a:hover { 
color:red; 
text-align:center; 
background:orange; 
} 

Answer 1

Просто добавьте:

position: absolute; к вашему .submenu класса

Example