Navigation drop down menu not showing using simple css and HTML

[Magnuzza]

I have a drop down menu list made in css and plain HTMl. It works fine but it rolls under my image slider , and I can see on a part of the menu when i hover on any of my menu. I think z-index property is missing somewhere. But I used in my ul li tag but no use.html\[code\]<ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href="">The Team</a></li> <li><a href="">History</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Products</a> <ul> <li><a href="">Cozy Couch</a></li> <li><a href="">Great Table</a></li> <li><a href="">Small Chair</a></li> <li><a href="">Shiny Shelf</a></li> <li><a href="">Invisible Nothing</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Online</a></li> <li><a href="">Right Here</a></li> <li><a href="">Somewhere Else</a></li> </ul> </li> </ul> \[/code\]css\[code\]ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none;}ul li { display: block; position: relative; float: left;}li ul { display: none; }ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap;}ul li a:hover { background: #617F8A; }li:hover ul { display: block; position: absolute;}li:hover li { float: none; font-size: 11px;}li:hover a { background: #617F8A; }li:hover li a:hover { background: #95A9B1; }\[/code\]