0

i m not convinced with the way explanation given for this drop down menu working .. please
help me out

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menu testing</title>
<style type="text/css">
#nav,#nav 
ul
{
list-style:none;
padding:0;
margin:0;
}
#nav
a{
display:block;
width:10em;
}
#nav li
{
width:10em;
float:left;
}
#nav li ul{
position:absolute;
width:10em;
left:-999em;
}
#nav li:hover ul
{
left:auto;
}
</style>
</head>

<body>
<ul id="nav">
<li>
<a href="#">Menu1</a>
<ul>
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a></li>
</ul>
</li>

<li>
<a href="#">Menu2</a>
<ul>
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a></li>
</ul>
</li>
</ul>
</br>
this is below the line
common

</body>

</html>
2
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by dineshswamy
0

Basically, the position of the sub menus is placed off screen (-999em which is far to the left) and when the top level <li> are hovered over the child <ul> has its margin reset to auto which makes it appear under the menu item. Taking the mouse off the <li> removes the hover effect and its absolute position reverts back to off screen.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.