css 下拉菜单不断扩展 main

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 类

Example