Ich habe ein Listenmenu am Boden der Seite angedockt. Wenn ich mit der Mouse über ein Listenelement gehe, möchte ich, dass die Box nach oben wächst und nicht so, wie in dem Code-Bespiel die gesamte Box nach oben rutscht, damit der gehoverte Element nach unten hin Platz hat. Hat jemand eine Idee?


HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#menu {
	position:fixed;
	bottom: 0;
	left: 50%;
	margin-left: -400px;
	width: 800px;	
}

#menu ul {
	list-style: none;
}

#menu li {
	width: 200px;
	float: left;
	height: 35px;
	color: #FFF;
	background-color: red;
	margin-top: 10px;	
}

#menu li:hover {
	height: 45px;
}
</style>
</head>
<body>
<div id="menu">
    <ul>
    <li id="e1">
        <a href="#">Menu 1</a>
    </li>
    <li id="e2">
        <a href="#">Menu 2</a>
    </li>      
    </ul>
</div>
</body>
</html>