css dropdown menu keeps expanding main

[TRiCk_C]

i just made my first css drop down menu and i am very proud of it , but i have a problem, when the submenu is expanding, it pulls down the main ul , and i dont want that .. it must stay the height i have given it .. so the purple div below stays in same place even if the submenu expands .. thank youHere is jsFiddle link http://jsfiddle.net/v937B/71/here is my code\[code\]<ul class="menu"> <li> <a href="http://stackoverflow.com/questions/15538152/#">Forside</a> </li> <li> <a href="http://stackoverflow.com/questions/15538152/#">Nyheder</a> </li> <li> <a href="http://stackoverflow.com/questions/15538152/#">Galleri</a> </li> <li> <a href="http://stackoverflow.com/questions/15538152/#">Andet</a> </li> <li>Vores hunde <ul class="submenu"> <li> <a href="http://stackoverflow.com/questions/15538152/#">Hvalpe</a> </li> <li> <a href="http://stackoverflow.com/questions/15538152/#">Hanner</a> </li> <li> <a href="http://stackoverflow.com/questions/15538152/#">T?ver</a> </li> </ul> </li></ul><div style="float:left; width:100%; background:#FF00FF;">&nbsp;</div>\[/code\]and here is my css\[code\]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; backgroundurple;}.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; backgroundink;}ul.submenu li a:hover {color:red; text-align:center; backgroundrange;}\[/code\]