Jump to content

Css Menu

damiancds

By damiancds
in CSS

Recommended Posts

damiancds Member

damiancds

Posted
Posted

I've got a problem with my drop down / flyout menu (pure css so far)Here's a link to it Problemthe problem is that i've got a "content box" that surrounds my paragraphs and what not and when the menu comes down and out the menu goes behind the content boxfor the code:Style sheet

/* Menu Style Sheet */ul.nav{	color: white;	margin: 2em;	padding: 5px;	background-color: green;	background-image: url(gradient_6.gif);	text-align: left;	border: .5px solid #000;	list-style-type: none;}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;}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;	margin-top: 2px;	margin-bottom: 2px;	margin-left: 4px;	margin-right: 4px;}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%;		}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;}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;}

Html

<html><head><title> </title><link rel="stylesheet" type="text/css" href="menu.css" ></head><body><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> </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></body></html>

the menu itself is included (php) and the page itself is built likeheader.phpmenu.htmlhome.phpfooter.phphome includes header and footer, header includes menu (header.php has all the links and everythingEntire page (through view page source) so it's all together

<!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" ><!--[sTART-LC]--><link rel='stylesheet' type='text/css' href='menu.css'/><!--[END-LC]--></head><body><br><br><div class="content4me"><br><a name="top"> </a name="top"><div class="left">Monday / August 10, 2009</div class="left"><br><div class="center"><div class="banner"><img src="Banner_1.png" alt="Ledge Rock Farm NY Inc. Logo"></div class="banner"></div class="center"><html><head><title> </title><link rel="stylesheet" type="text/css" href="menu.css" ></head><body><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> </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></body></html><br><br><body>Welcome To Ledge Rock Farm NY Inc.<hr width="350" noshade align="left">	<div id="box">						<!--- box border -->		<div id="lb">		<div id="rb">		<div id="bb"><div id="blc"><div id="brc">		<div id="tb"><div id="tlc"><div id="trc">		<!--  -->						<div id="content">	<p>If you're a first-timer here, you might enjoy visitingour <a href="Know.php">Did You Know?</a> and <a href="Why.php">Why Grass Feed Beef?</a> sections. Even if you're not, we try to keep adding so you'll most likely find something new anyway. I also suggest you visit our <a href="Recipes.php">recipes</a> section, even if you're not buying, you can get ideas for an upcoming dinner as well as submit a favorite recipe of your own. You may even learn something on our <a href="FAQ.php">FAQ</a> page. You can even submit aquestion for use to answer and possibly add to our list.</p><p>Whatever the case may be, i at least hope you enjoy your stay here</p>		</div>				<!--- end of box border -->		</div></div></div></div>		</div></div></div></div>		<!-- -->			</div><a href="CookingTips.php">cooking tips</a></body><div class="center"><a href="#top" title="Jump Back To The Top Of The Page.">Back to top</a></div class="center"><div class="copyright"><h6><hr size="1" width="750">|<a class="copyright" href="Home.php" title="Navigate To Our Home Page.">Home</a> |<a class="copyright" href="About.php" title="Find Out More About Us.">About Us</a> |<a class="copyright" href="Contact.php" title="View Our Contact Information.">Contact Us</a> |<a class="copyright" href="Newsletter.php" title="Take A Look At Our Newsletter.">Newsletter</a> |<a class="copyright" href="Faq.php" title="Take A Look At Some Frequently Asked Questions.">Frequently Asked Questions</a> |<a class="copyright" href="SiteMap.php" title="View An Outline Of Our Site With This Site Map.">Site Map</a> |<a class="copyright" href="Access.php" title="View Our Accessibility Information.">Accesibility</a> |<a class="copyright" href="Privacy.php" title="View Our Privacy Policy.">Privacy Policy</a> |<a class="copyright" href="Use.php" title="View Our Terms Of Use.">Terms of Use</a> |  <hr size="1" width="750"></h6></div class="copyright"><br></div class="content4me"></body><script LANGUAGE="JavaScript">// Courtesy of SimplytheBest.net - [url="http://simplythebest.net/scripts/"]http://simplythebest.net/scripts/[/url]<!-- Beginvar osd = "   "osd +="Welcome to Ledge Rock Farm NY Inc.  ";osd +="  Learn some interesting facts about beef processed for grocery stores in our \"Did you Know?\" section.  ";osd +="  You may also learn a few things in our \"Why Grass Feed Beef?\" section as well.  ";osd +="     Enjoy your stay...     ";osd +="          ";var timer;var msg = "";function scrollMaster () {msg = customDateSpring(new Date())clearTimeout(timer)msg += " " + showtime() + " " + osdfor (var i= 0; i < 100; i++){msg = " " + msg;}scrollMe()}function scrollMe(){window.status = msg;msg = msg.substring(1, msg.length) + msg.substring(0,1);timer = setTimeout("scrollMe()", 100);}function showtime (){var now = new Date();var hours= now.getHours();var minutes= now.getMinutes();var seconds= now.getSeconds();var months= now.getMonth();var dates= now.getDate();var years= now.getYear();var timeValue = ""timeValue += ((months >9) ? "" : " ")timeValue += ((dates >9) ? "" : " ")timeValue = ( months +1)timeValue +="/"+ datestimeValue +="/"+  yearsvar ap="A.M."if (hours == 12) {ap = "P.M."}if (hours == 0) {hours = 12}if(hours >= 13){hours -= 12;ap="P.M."}var timeValue2 = " " + hourstimeValue2 += ((minutes < 10) ? ":0":":") + minutes + " " + apreturn timeValue2;}function MakeArray(n) {this.length = nreturn this}monthNames = new MakeArray(12)monthNames[1] = "January"monthNames[2] = "February"monthNames[3] = "March"monthNames[4] = "April"monthNames[5] = "May"monthNames[6] = "June"monthNames[7] = "July"monthNames[8] = "August"monthNames[9] = "September"monthNames[10] = "October"monthNames[11] = "November"monthNames[12] = "December"daysNames = new MakeArray(7)daysNames[1] = "Sunday"daysNames[2] = "Monday"daysNames[3] = "Tuesday"daysNames[4] = "Wednesday"daysNames[5] = "Thursday"daysNames[6] = "Friday"daysNames[7] = "Saturday"function customDateSpring(oneDate) {var theDay = daysNames[oneDate.getDay() +1]var theDate =oneDate.getDate()var theMonth = monthNames[oneDate.getMonth() +1]var dayth="th"if ((theDate == 1) || (theDate == 21) || (theDate == 31)) {dayth="st";}if ((theDate == 2) || (theDate ==22)) {dayth="nd";}if ((theDate== 3) || (theDate  == 23)) {dayth="rd";}return theDay + ", " + theMonth + " " + theDate + dayth + ","}scrollMaster();// End --></SCRIPT></html>

also, the script at the end is just for a scrolling message in the loading bar areaany ideas (preferably simple) would be greatly appreciated.thanks,

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...