Below is my code, currently, when I was hovering "About Us", everything under the drop-down menu; how can I change the css so that it only hangs when I hover over the mouse, this means that when I am on the "Command", then I should see the menu under it.
You can also adjust the width so that it is increased to the left.
also, when the drop-down menu is larger in lenth, it is hiding below my content, I want the drop-down menu to be above the body of the page, and not hide.
Thank you all in advance.
<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/
source share