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