css/html submenu displaying behind rather than on top of other page content

[chizanand]

I have a navigation menu for my website:here is the HTML\[code\]<ul id="trans-nav"> <li><a href="http://stackoverflow.com/questions/15734962/#">About Us</a> <ul> <li><a href="http://stackoverflow.com/contact">Contact Us</a></li> <li><a href="http://stackoverflow.com/login">Login</a></li> </ul> </li></ul>\[/code\]as you can see it has a dropdown (submenu) under the link but the sub menu is displaying under the page content below the menu.how can i make it display the sub menu OVER the page content rather than behind?here is the CSS:\[code\]#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }#trans-nav li:hover { background-position: 0 -40px; }#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }#trans-nav li:hover ul { opacity: 1; }#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }#trans-nav li:hover ul li { height: 30px; line-height: 30px; }#trans-nav li ul li a { background: #EEEEEE; }#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }#trans-nav li { -webkit-transition: all 0.2s; }#trans-nav li a { -webkit-transition: all 0.5s; }#trans-nav li ul { -webkit-transition: all 1s; }#trans-nav li ul li { -webkit-transition: height 0.5s; }\[/code\]also a fiddle: http://jsfiddle.net/charliejsford/SAXmG/