Css Menu

[damiancds]

Okay, I've got a menu Herebasically, I want it aligned in the center like it is but I want the gradient background going the full width of the page.Also, I have a last li element that I'd like to set the width to 0 or 1 (to make the centering more accurate.menu.cssStyle.cssif the links didn't work for some reason, here's the codemenu.css

/* Menu Style Sheet */ul.nav{	color: white;	margin: 2em;	padding: 5px;	background-color: green;	background-image: url(gradient_6.gif);	text-align: left;	border: 1px solid #000;	list-style-type: none;	position: relative;	z-index: 99;}ul.drop{	color: white;	margin: 0em;	padding: 0px;	background-color: green;	background-image: url(gradient_6.gif);	text-align: left;	border: .5px solid #000;	list-style-type: none;	position: relative;	z-index: 99;	width:100%;}li.nav_End{	float:left;	width: 150px;	position: relative;	padding: 3px;	color:#194812;	font-family:Arial;	font-size:11px;	font-weight:bold;	text-decoration: none;	list-style-type: none;	background-image:url(xxx.gif);	background-repeat:no-repeat;	background-position:92% 50%;	}li.nav_Down{	float: left;	padding: 5px;	width: 8em;	position: relative;	color:#194812;	font-family:Bookman Old Style;	font-size:14px;	font-weight:bold;	text-decoration: none;	list-style-type: none;	background-image:url(arrow_7.gif);	background-repeat:no-repeat;	background-position:92% 50%;	text-align: center;	}li.nav_Out{	display: block;	width: 150px;	padding: 3px;	position: relative;	color: black;	font-family:Arial;	font-size:11px;	font-weight:bold;	list-style-type: none;	background-image:url(arrow_0.gif);	background-repeat:no-repeat;	background-position:92% 50%;		}li.nav_DownLast{	clear: both;	width: 0px;}li.nav a.nav{	color: white;	text-decoration: none;}	li.nav_Down a.nav{	color: white;}	li.nav_Down:hover ul.nav a.nav{	color: black;	text-decoration: none;}	li.nav_Down:hover li.nav_Out:hover ul.nav a.nav{	text-decoration: none;}	li.nav_Down:hover li.nav_Out:hover li.nav_Out:hover ul.nav a.nav{	text-decoration: none;}	li.nav_Down:hover a.nav{	color: black;	text-decoration: underline;}li.nav_Down:hover li.nav_Out:hover a.nav{	color: black;	text-decoration: underline;}li.nav_Down:hover li.nav_Out:hover li.nav_Out:hover a.nav{	color: black;	text-decoration: underline;}li.nav_Down:hover li.nav_Out:hover li.nav_Out:hover li.nav_Out:hover a.nav{	color: black;	text-decoration: underline;}li.nav:hover{	background-image: url(None.png);	background-color: #B0E9A8;}li.nav_End:hover{	background-image: url(None.png);	background-color: #B0E9A8;}li.nav_Out:hover{		background-color: #B0E9A8;			background-image:url(arrow_0.gif);	background-repeat:no-repeat;	background-position:92% 50%;}li.nav_Down:hover{	background-color: #B0E9A8;		background-image:url(arrow_2.gif);	background-repeat:no-repeat;	background-position:92% 50%;}li.nav_Down ul.nav{	color: black;	display: none;	background-image: url(None.png);	}/* One Level Deep */li.nav_Down:hover ul.nav{	display: block;	position: absolute;	top: -3px;	left: -33px;	background-image: url(None.png);	background-color: #DDF6DA;}li.nav_Down:hover ul.nav li.nav{	display: block;}li.nav_Down:hover li.nav_Out ul.nav{	display: none;}/* Second Level Deep */li.nav_Down:hover li.nav_Out:hover ul.nav{	display: block;	position: absolute;	top: -24px;	left: 125px;}li.nav_Down:hover li.nav_Out:hover li.nav_Out ul.nav{display: none;}li.nav_Down:hover li.nav_Out:hover li.nav_Out:hover ul.nav{display: block;}div.menu{	margin: 0 auto;}

Style.css

/* Ledge Rock Farm Style Sheet */body {background-color: ivory;background-image: url('back5.jpg');font-family: "bookman old style";}img{border-style: none;}table{bgcolor: Ivory;margin-left: auto;margin-right: auto;}table.Beef_Name_Table{bgcolor: Ivory;margin-left: auto;margin-right: auto;/*border-collapse: collapse;*/border-color: black;border-spacing: 0px;border-width: 2px;}td.Beef_Name_Table{padding: 3px;border-color: black;border-width: 2px;}td.Image{bgcolor: black;}p{text-indent: 1cm;}hr{size: 3;}h6 /* copyright information */{font: 11px;font-weight: bold;font-family: arial;font-variant: normal;color: Gray;}A.copyright{color: 	Gray;text-decoration: none;}A.copyright:link{color: Gray;}A.copyright:visited{color: Gray;text-decoration: none;}A.copyright:active{color: Silver;text-decoration: none;}A.copyright:hover{color: Silver;text-decoration: none;}A.Acct{color: white;background-color: navy;}A.menu{color: 	black;text-decoration: none;/*background-image: url('menu1a.jpg');*/}A.menu:link{color: white;}A.menu:visited{color: black;text-decoration: none;background-color: white;/*background-image: url('menu1a.jpg');*/}A.menu:active{color: white;text-decoration: none;/*background-image: url('menu2a.png');*/}A.menu:hover{color: white;text-decoration: none;background-color: blue;/*background-image: url('menu2a.png');*/}ol { font-weight: bold }ol span { font-weight: normal; }div.left{text-align: left;}div.center{text-align: center;}div.right{text-align: right;}div.content4me{width: 1000px;margin: 0 auto;background-color: white;}div.copyright{width: 1000px;margin: 0 auto;text-align: center;}div.banner{width: 100%;background-color: green;}div.menu{width: 1000px;margin: 0 auto;background-color: black;background-image: url('menu1a.png');color: white;}span.menu{background-image: url('menu2a.png');}#tlc, #trc { zoom: 1 }body	{	margin: 0;	padding: 0;	background-color: white;	font-size: 100.01%;	text-align: center; 	}#box	{	position: relative;	margin-left: auto;	margin-right: auto;		margin-top: 3em;	padding: 0;	text-align: left;	width:80%;				/* <-- use this to tie width to viewport size */	width: 55em;				/* <-- use this for a set width */	background-color: #eeeeee;	} 	#content	{	padding:3em;	}#content h1	{	color:#0354c2;	font-weight: bold;	font-size: 1.2em;	font-family: helvetica, geneva, arial, sans-serif;	}		#content p	{	color:#3b3b3b;	font-size: 1em;	line-height: 1.3em;	font-family: arial, helvetica, sans-serif;	}		/* ---=== border code follows ===--- *//*	tlc = top left corner	trc = top right corner	blc = bottom left corner	brc = bottom right corner	lb = left border	rb = right border	tb = top border	bb = bottom border */#tlc, #trc, #blc, #brc	{	background-color: transparent;	background-repeat: no-repeat;	}#tlc	{	background-image:url(images/tlc.gif);	background-position: 0% 0%;	}#trc	{	background-image:url(images/trc.gif);	background-position: 100% 0%;	}	#blc	{	background-image:url(images/blc.gif);	background-position: 0% 100%;	}#brc	{	background-image:url(images/brc.gif);	background-position: 100% 100%;	}#tb, #bb	{	background-color: transparent;	background-repeat: repeat-x;	}			#tb	{	background-image:url(images/tb.gif);	background-position: 0% 0%;	}#bb	{	background-image:url(images/bb.gif);	background-position: 50% 100%;	}	#rb	{	background-image:url(images/r.gif);	background-position: 100% 0%;	background-repeat: repeat-y;	}#lb	{	background-image:url(images/l.gif);	background-position: 0% 100%;	background-repeat: repeat-y;	}			

Menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Ledge Rock Farm Inc.</title><link rel="stylesheet" type="text/css" href="Style.css" /><link rel="stylesheet" type="text/css" href="menu.css" /></head><body><div class="menu"><ul class="drop">	<li class="nav_Down"> <a class="nav" href=""> Home </a> </li>	<li class="nav_Down"> <a class="nav" href=""> About Us </a> 		<ul class="nav">			<li class="nav_End"> <a class="nav" href=""> History </a> </li>			<li class="nav_End"> <a class="nav" href=""> Who We Are </a> </li>		</ul>	</li>	<li class="nav_Down"> <a class="nav" href=""> Products </a>		<ul class="nav">			<li class="nav_Out"> <a class="nav" href=""> Grass Fed Beef </a>				<ul class="nav">				<li class="nav_Out"> <a class="nav" href=""> Steaks </a>					<ul class="nav">					<li class="nav_End"> <a class="nav" href=""> Chuck Steak </a> </li>					<li class="nav_End"> <a class="nav" href=""> Hanger Steak</a> </li>					<li class="nav_End"> <a class="nav" href=""> Strip Steak </a> </li>					<li class="nav_End"> <a class="nav" href=""> Skirt Steak </a> </li>					<li class="nav_End"> <a class="nav" href=""> Flank Steak </a> </li>					<li class="nav_End"> <a class="nav" href=""> T-Bone Steak </a> </li>					<li class="nav_End"> <a class="nav" href=""> Ribeye Steak </a> </li>					<li class="nav_End"> <a class="nav" href=""> Sirloin Tip Steak </a> </li>					<li class="nav_End"> <a class="nav" href=""> Boneless Top Sirloin Steak </a> </li>					<li class="nav_End"> <a class="nav" href=""> Porterhouse Steak </a> </li>					</ul>				</li>				<li class="nav_Out"> <a class="nav" href=""> Roasts	</a> 					<ul class="nav">					<li class="nav_End"> <a class="nav" href=""> Chuck Roast </a> </li>					<li class="nav_End"> <a class="nav" href=""> Eye Round Roast</a> </li>					<li class="nav_End"> <a class="nav" href=""> Top Round Roast</a> </li>					<li class="nav_End"> <a class="nav" href=""> Bottom Round Roast </a> </li>					<li class="nav_End"> <a class="nav" href=""> Sirloin Tip Roast </a> </li>					</ul>				</li>				<li class="nav_Out"> <a class="nav" href=""> Ground Meat </a>					<ul class="nav">					<li class="nav_End"> <a class="nav" href=""> Hamburger </a> </li>					<li class="nav_End"> <a class="nav" href=""> Hamburger Patties</a> </li>					</ul>				</li>				<li class="nav_Out"> <a class="nav" href=""> Other Cuts	</a> 					<ul class="nav">					<li class="nav_End"> <a class="nav" href=""> Filet Mignon </a> </li>					<li class="nav_End"> <a class="nav" href=""> Sandwich Steaks </a> </li>					<li class="nav_End"> <a class="nav" href=""> Stew Beef </a> </li>					<li class="nav_End"> <a class="nav" href=""> Soup Shanks </a> </li>					<li class="nav_End"> <a class="nav" href=""> Brisket </a> </li>					<li class="nav_End"> <a class="nav" href=""> Kabobs </a> </li>					<li class="nav_End"> <a class="nav" href=""> Short Ribs </a> </li>					<li class="nav_End"> <a class="nav" href=""> Tongue </a> </li>					<li class="nav_End"> <a class="nav" href=""> Heart </a> </li>					<li class="nav_End"> <a class="nav" href=""> Liver </a> </li>					<li class="nav_End"> <a class="nav" href=""> Ox Tails </a> </li>					</ul>				</li>				</ul>			</li>		</ul>	</li>	<li class="nav_Down"> <a class="nav" href=""> Information </a>		<ul class="nav">			<li class="nav_End"> <a class="nav" href=""> Why Grass Fed Beef? </a> </li>			<li class="nav_End"> <a class="nav" href=""> Did You Know </a> </li>			<li class="nav_End"> <a class="nav" href=""> FAQ </a> </li>		</ul>	</li>	<li class="nav_Down"> <a class="nav" href=""> Locations </a> 		<ul class="nav">			<li class="nav"> <a class="nav" href=""> ... </a> </li>			<li class="nav_Out"> <a class="nav" href=""> Markets </a> 				<ul class="nav">					<li class="nav_End"> <a class="nav" href=""> Central Avenue </a> </li>					<li class="nav_End"> <a class="nav" href=""> Waterford </a> </li>					<li class="nav_End"> <a class="nav" href=""> St. Stevens - 82nd Street </a> </li>				</ul>			</li>				</ul>	</li>	<li class="nav_Down"> <a class="nav" href=""> Contact Us </a> 		<ul class="nav">			<li class="nav_End"> <a class="nav" href=""> Contact Customer Service </a> </li>			<li class="nav_End"> <a class="nav" href=""> Contact Webmaster </a> </li>		</ul>	</li>	<li class="nav_DownLast"></li></ul></div class="menu"></body></html>

Just to say, there's two css files because I organized all the menu css in menu.css and all the other normal page css in Style.csslet me know if you need any more information or anythingthanks,

[damiancds]

Adding to my first questions, is there any way to make an li element clickable?right now I've got it so when the user hovers, the background color changes but they still have to move over to the words in the li element (which is a link) and click on it that way.thanks,

[i_gresn]

You div.menu width is set to 1000px that's why it doesn't stretch cross the page, also I found margin: 0 auto; for this same element that's why it is centered on top of the page. To make your links clickable you have to convert your links to block level elements, they are inline by default.Once you set it to block your links will cover the whole li area.

[damiancds]

okay, the block display on the link elements fixed that, but the menu isn't fixed.basically i want the drop downs centeredi just tried adding a first and last element with a 25% width.so...i want... _________________________________|_______| Home | About | .... |________|to give words, i want the non empty li elements in the drop down part centered while the same background still stretches across the width of the page