how this css drop down menu works ?

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>

dineshswamy

Light Poster

29 posts since Feb 2010

Reputation Points: 10

Solved Threads: 0

4 Months Ago

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

hericles

Practically a Posting Shark

823 posts since Nov 2007

Reputation Points: 136

Solved Threads: 168