Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style> 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: #000061; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #617F8A; } li:hover ul { display: block; position: absolute; } ul li:hover li { float: none; font-size: 11px; } li:hover a { background: #617F8A; } li:hover li a:hover { background: #95A9B1; } </style> <body> <ul id="menu"> <li><a href=""><b>Home</b></a></li> <li><a href=""><b>About Us</b></a> <ul> <li><a href="">Team</a> <ul> <li><a href="">Profile</a></li> <li><a href="">Board</a></li> </ul> </li> </ul> </li> <ul> </body> JSFiddle: http://jsfiddle.net/LWEry/
