Member Avatar for dineshswamy

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
  • 147 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by dineshswamy
Member Avatar for hericles

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.

Member Avatar for dineshswamy

i got it ... thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.