The following code snippet displays a drop down menu followed by a line of text. When the cursor hovers over 'Comedies', the drop down menu appears; but 'pushes' the text line 'This is test content' down (2) lines to make vertical space for the menu. What change is needed so that the text line is not pushed down; but rather the drop down menu justs appears over the text line without repositioning it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<script type="text/javascript" language="Javascript" src="script01.js">
</script>
<style type="text/css">
div.container {
width:100%;
background-image:url('../images/grey.gif');
}
h1.header {
padding:0;
margin:0;
}
div.left {
float:left;
width:160px;
margin:0;
padding:1em;
}
div.menu_box { margin-bottom: 10px ;
width: 180px ;
background-color: #CF9 ;
clear: left ;
}
ul.menu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
li a:hover {
background-color: #060;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="menu_box">
<a href="menu1.html" class="menuLink">Comedies</a>
<ul class="menu" id="menu1">
<li><a href="../become_a_member.html"
target="main_entry_frame" >Menu Item 1</a></li>
<li><a href="../become_a_member.html"
target="main_entry_frame" >Menu Item 2</a></li>
</ul>
</div>
<div class="left"><p>This is test content</p>
</div>
</body>
</html>
