CSS Scrolling Menu

HTML & CSS
1

Hi everyone,
The following code creates a page where the submenu is hidden. I’m looking to show it up while the mouse hovers the
main menu’s caption and fail to do so.
Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<style type="text/css">
	#menu ul > #menu1 ul
	  {
	   display:none;
	 }
	
	#menu ul li a:hover
              {
               #menu ul > #menu1 ul{display:block;}
              }
</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li><a href="#">abc</a>
				<ul>
<div id="menu1">	
						<ul>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
    							<li><a data-href="#">3</a></li>
						</ul>
     					</div>
				</ul>
			</li>
		</ul>
	</div>
</body>

Can anyone show me please where have i gone wrong in that code ? How can i show the submenu when “abc” is hovered?
Thanks a lot

2

#menu ul li a:hover
{
#menu ul > #menu1 ul{display:block;}
}

What exactly is that? Throw that into a validator and they’ll be screaming at you :). You also can’t have a <div> be the direct child of a <ul>. Try this example. It’s very basic and doesn’t do any aesthetics (such as removing the bullets, margins, etc)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<style type="text/css">
#menu1 
{
	position:absolute;
	margin-left:-999em;
	top:100%;
	left:0;
	background:red;
}	
#menu li
{
	position:relative;
}
#menu1 li
{
position:static;/*reset the position:relative to avoid bugs*/
}
#menu li:hover #menu1
{
	margin-left:0;/*reset it to 0 to show*/
}
</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li><a href="#">abc</a>
				<ul id="menu1">
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
    					<li><a data-href="#">3</a></li>
				</ul> 
			</li>
		</ul>
	</div>
</body>
</html>
3

Thanks Ryan,
I’ll check my code with a validator and then learn yours.
Thanks a lot !

4

You’re welcome deotpit :). If you don’t understand something from my code, feel free to shout.