CSS Drop Down Menu Query

Zefer · #1 (**permalink**) 07-11-09, 03:37 PM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.submenu {
				display:none;
			}
			.list:hover .submenu {
				list-style:none;
				display:block;
			}
			.list:hover {
				background:#00FF00;
			}
			.list {
				background:#FF00FF;
				text-align:center;
				list-style:none;
				width:10%;
			}
			.submenu {
				text-align:center;
			}
			.item {
				
			}
			.item:hover {
				background:#FF0000;
			}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li class="list">
				Hello!
				<ul class="submenu">
					<li class="item">1</li>
					<li class="item">2</li>
					<li class="item">3</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

How can I make it so the li's classed "item" will be the full width of the box they're in?

job0107 · #2 (**permalink**) 07-11-09, 11:12 PM

HTML 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>
<style>
#menu li ul {
    display: none;
    position: absolute;
    z-index: 10;
}
#menu ul {list-style-type:none;padding:0; margin:0;width:260px;}
#menu ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #000000; border-left:solid 1px #000000;}
#menu ul li a {color: #FFFFFF;background: #000000;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; width:260px;}
#menu ul li:hover a {background-color:#0000ff; text-decoration:none; color:#FFFF00;}
#menu ul li:hover ul {display:block;  Width:260px; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
#menu ul li:hover ul li a {display:block; width:260px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #000000; border-bottom: solid 1px #000000; background-color:#000000;  color:#FFFFFF;}
#menu ul li:hover ul li a:hover {background-color:#ff0000; text-decoration:none;color:#FFFF00;}
#menu ul li a:hover {background-color:#0000ff; text-decoration:none;color:#FFFF00;}
</style>
</head>
<body>
<div id="menu">
 <ul id="menuList">
  <li><a href="#">Hello!</a>
    <ul>
     <li><a href="#">1</a></li>
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
    </ul>
  </li>
 </ul>
</div>
</body>
</html>

Zefer · #3 (**permalink**) 07-12-09, 10:19 AM

Thank-you very much.