menu i baner

[rivulus]

<div>
<ul id="menu">
<li><a href="#">LINK A</a>
<ul>
<li><a href="#">LINK A1</a></li>

</ul>
</li>


<li><a href="#">LINK B</a>
<ul>
<li><a href="#">LINK B1</a></li>
<li><a href="#">LINK B2</a></li>
</ul>
</li>

<li><a href="#">LINK C</a>
<ul>
<li><a href="#">LINK C1</a></li>
<li><a href="#">LINK C2</a></li>
<li><a href="#">LINK C3</a></li>
<li><a href="#">LINK C4</a></li>
<li><a href="#">LINK C5</a></li>
<li><a href="#">LINK C6</a></li>
<li><a href="#">LINK C7</a></li>
</ul>
</li>

<li><a href="#">LINK D</a>
<ul>
<li><a href="#">LINK D1</a></li>
<li><a href="#">LINK D2</a></li>
<li><a href="#">LINK D3</a></li>
<li><a href="#">LINK D4</a></li>
</ul>
</li>
<li><a href="#">LINK E</a>
<ul>
<li><a href="#">LINK E1</a></li>
<li><a href="#">LINK E2</a></li>
<li><a href="#">LINK E3</a></li>

</ul>
</li>
</ul>

<img src="baner.jpg" alt="reklama">
</div>

i kod CSS:

#menu {
line-height: 30px;
width: 770px;
margin: 0;
padding: 0;


}

#menu li {
float: left;
list-style-type: none;

}

#menu li a {
display: block;
width: 154px;
text-align: center;
background: red;
color: white;
padding-top: 1px;
padding-bottom: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;


}

#menu li a:hover {
background: blue;
color: white;
text-decoration: none;

}

#menu li li {
float: none;

}

#menu li ul {
height: 0px;
overflow:hidden;
margin: 0;
padding: 0;

}

#menu li:hover ul {
height: auto;

}