css - cssドロップダウンメニューはメインを拡大し続けます

Question

私はちょうど私の最初のcssドロップダウンメニューを作りました、そして私はそれを非常に誇りに思っています、しかし私は問題があります、サブメニューが拡大しているとき、それはメインのulを引き下げます、そして私はそれを望んでいません..それは私が持っている高さを維持しなければなりません与えられた..サブメニューが展開されても、下の紫色のdivは同じ場所にとどまります..ありがとう

これが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クラスに

例