Jump to content

Css Menu Help

damiancds

By damiancds
in CSS

Recommended Posts

damiancds Member

damiancds

Posted
Posted

First off, the codeMenu Style Sheet

/* Menu Style Sheet */ul.nav{	color: white;	margin: 2em;	padding: 5px;	background-color: green;	background-image: url(gradient_6.gif);		border: .5px solid #000;}li.nav{	display: inline;	width: 150px;	position: relative;	margin:2px 5px 5px 5px;		color:#194812;	font-family:Arial;	font-size:11px;	font-weight:bold;	text-decoration: none;}li.nav_Down{	display: inline;	padding: 5px;	width: 200px;	position: relative;		color:#194812;	font-family:Bookman Old Style;	font-size:14px;	font-weight:bold;	text-decoration: none;		background-image:url(arrow_7.gif);		background-repeat:no-repeat;		background-position:92% 50%;		}li.nav_Out{	display: block;	width: 150px;		position: relative;				margin:2px 5px 5px 5px;		color:#194812;		font-family:Arial;		font-size:11px;		font-weight:bold;						background-image:url(arrow_0.gif);		background-repeat:no-repeat;		background-position:92% 50%;		}li.nav_Border:hover{	border-top: .5px solid black;	display: block;	width: 150px;	position: relative;	background-image: url(None.png);	background-color: #B0E9A8;}li.nav_Border{	border-top: .5px solid black;	display: block;	width: 150px;	position: relative;	margin:2px 5px 5px 5px;	color:#194812;	font-family:Arial;	font-size:11px;	font-weight:bold;}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:#194812;	font-family:Arial;	font-size:11px;	font-weight:bold;	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_Out:hover{		background-color: #B0E9A8;}li.nav_Down:hover{	background-image: url(None.png);	background-color: #B0E9A8;}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: -23px;	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;}

Menu.html

<html><head><title> </title><link rel="stylesheet" type="text/css" href="menu.css" ></head><body><ul class="nav">	<li class="nav_Down"> <a class="nav" href=""> Home </a class="nav"> </li class="nav_Down">	<li class="nav_Down"> <a class="nav" href=""> About Us </a class="nav"> 		<ul class="nav">			<li class="nav"> <a class="nav" href=""> History </a class="nav"> </li class="nav">			<li class="nav"> <a class="nav" href=""> Who We Are </a class="nav"> </li class="nav">		</ul class="nav">	</li class="nav_Down">	<li class="nav_Down"> <a class="nav" href=""> Products </a class="nav_Down">		<ul class="nav">			<li class="nav_Out"> <a class="nav" href=""> Grass Fed Beef </a class="nav">				<ul class="nav">				<li class="nav_Out"> <a class="nav" href=""> Steaks </a class="nav">					<ul class="nav">					<li class="nav"> <a class="nav" href=""> Chuck Steak </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Hanger Steak</a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Strip Steak </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Skirt Steak </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Flank Steak </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> T-Bone Steak </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Ribeye Steak </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Sirloin Tip Steak </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Boneless Top Sirloin Steak </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Porterhouse Steak </a class="nav"> </li class="nav">					</ul class="nav">				</li class="nav">				<li class="nav_Out"> <a class="nav" href=""> Roasts	</a class="nav"> 					<ul class="nav">					<li class="nav"> <a class="nav" href=""> Chuck Roast </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Eye Round Roast</a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Top Round Roast</a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Bottom Round Roast </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Sirloin Tip Roast </a class="nav"> </li class="nav">					</ul class="nav">				</li class="nav">				<li class="nav_Out"> <a class="nav" href=""> Ground Meat </a class="nav">					<ul class="nav">					<li class="nav"> <a class="nav" href=""> Hamburger </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Hamburger Patties</a class="nav"> </li class="nav">					</ul class="nav">				</li class="nav">				<li class="nav_Out"> <a class="nav" href=""> Other Cuts	</a class="nav"> 					<ul class="nav">					<li class="nav"> <a class="nav" href=""> Filet Mignon </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Sandwich Steaks </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Stew Beef </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Soup Shanks </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Brisket </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Kabobs </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Short Ribs </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Tongue </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Heart </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Liver </a class="nav"> </li class="nav">					<li class="nav"> <a class="nav" href=""> Ox Tails </a class="nav"> </li class="nav">					</ul class="nav">				</li class="nav">				</ul class="nav">			</li class="nav">			<li class="nav_Out"> <a class="nav" href=""> Naturally Raised Poultry </a class="nav"> 				<ul class="nav">				<li class="nav"> <a class="nav" href=""> Chicken </a class="nav"> </li class="nav">				<li class="nav"> <a class="nav" href=""> Turkey </a class="nav"> </li class="nav">				<li class="nav"> <a class="nav" href=""> Duck </a class="nav"> </li class="nav">				<li class="nav"> <a class="nav" href=""> Goose </a class="nav"> </li class="nav">				</ul class="nav">			</li class="nav">		</ul class="nav">	</li class="nav_Down">	<li class="nav_Down"> <a class="nav" href=""> Information </a class="nav">		<ul class="nav">			<li class="nav"> <a class="nav" href=""> Why Grass Fed Beef? </a class="nav"> </li class="nav">			<li class="nav"> <a class="nav" href=""> Did You Know </a class="nav"> </li class="nav">			<li class="nav_Border"> <a class="nav" href=""> FAQ </a class="nav"> </li class="nav_Border">		</ul class="nav">	</li class="nav_Down">	<li class="nav_Down"> <a class="nav" href=""> Locations </a class="nav"> </li class="nav_Down">	<li class="nav_Down"> <a class="nav" href=""> Contact Us </a class="nav_Down"> 		<ul class="nav">			<li class="nav"> <a class="nav" href=""> Contact Customer Service </a class="nav"> </li class="nav">			<li class="nav"> <a class="nav" href=""> Contact Webmaster </a class="nav"> </li class="nav">		</ul class="nav">	</li class="nav_Down"></ul class="nav"></body></html>

Okay,What I need help with is getting my top li elements at a fixed width.I read somewhere about not being able to set width to inline elements and setting them to float left.Only problem was that I lost my background image.Also, when i tried putting up (on a local host (wampserver) to test it) it didn't stay on top.What I mean is, I've got one of those content boxes (http://sperling.com/examples/box/) and when the dropdown portion of the menu came out,it went behind the box and not on top of it.I also know i'm going to need some javascript to get this to display on ie and what not but one thing at a timeI apologize for the mess, and I appreciate any input you've got

Link to comment
Share on other sites
alexnofue Member

alexnofue

Posted
Posted

Hi, first please avoid putting class inside a closing tag, it doesn't do anything, you only need them in the opening tag.well, you almost go it, no big change.li.nav_Down{/*display: inline;*/float: left; // so we change the inline for a floatpadding: 5px;width: 120px;posi......background-position:92% 50%;list-style-type: none; //this is for no circle, square or anything in your list, when you first float them they appear}li.last{clear: both;} // this is for the ending of the list to workin the html, i put a empty list item to clear the float, that way no funny behavior should happen<li class="nav_Down"> <a class="nav" href=""> Contact Us </a> <ul class="nav"> <li class="nav"> <a class="nav" href=""> Contact Customer Service </a> </li> <li class="nav"> <a class="nav" href=""> Contact Webmaster </a> </li> </ul></li><li class="last" ></li>this probably needs more work, so please don't copy it without trying to learn from it and also because it might not be what you need.

Link to comment
Share on other sites
damiancds Member

damiancds

Posted
  • Author
Posted

Great, I'd tried the float: left but it messed up,I was just missing the last li element having a clear: both;now i can focus on the hiding issue and browser compatibilitythanks,

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...