CSS - Css Help Needed, Css Menu, Multiple Links

I have a very simple drop down menu that I'm playing around with and trying to make cross-browser.

The drop-down currently looks OK in Mozilla/Firefox.

Presently, it does not work in either IE 6 or IE 7.

You can see the drop down HERE

I have noticed that when you alter the URL in this line of code, inside the href attribute (for example):

Code:

<li><a href="">Computer Hardware (1)</a></li>

...sometimes the menu will work (or break) in ANY given browser (IE or Mozilla)...

Try substituting different values for the href attribute inside the link. Depending on the href value, sometimes the code works, and sometimes it doesn;t (in either IE or Mozilla).

Something screwy is going on with the href attribute, but I can;t tell what it is.

Any help is appreciated.

Hello,

I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works.

The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work.

http://www.tpxdesign.com/test/Valliant/alpha/index7.php

My nav menu code and nav style sheet:

Code:

<!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav"> 
  <li><a href="demoreel.php" class="port">Portfolio</a> 
    <ul>
      <li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
      <li><a href="shorts.php" class="port">Shorts</a></li>
	  <li><a href="musicvid.php" class="port">Music Video</a></li>
	  <li><a href="comvid.php" class="port">Commercial</a></li>
	  <li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
	  <li><a href="gallery.php" class="port">Photo. Gallery</a></li>
    </ul>
  </li> 
  <li><a href="services.php" class="serv">Services</a> 
  </li> 
  <li><a href="newupdate.php" class="newe">News & Events</a> 
    <ul>
      <li><a href="newupdate.php" class="newe">News/Updates</a></li>
      <li><a href="eventblog.php" class="newe">Event Calendar</a></li>
    </ul>
  </li>
  <li><a href="bio.php" class="about">About Valliant</a>
    <ul>
      <li><a href="resume.php" class="about">Resume</a></li>
      <li><a href="bio.php" class="about">Biography</a></li>
	  <li><a href="contact.php" class="about">Contact</a></li>
    </ul>
  </li> 
  <li><a href="links.php" class="link">Links</a></li>
  <li><a href="index7.php" class="home">Home</a></li>
</ul> 
</div> 
</div>
<!--[if !IE]><!-- end nav --><![endif]-->

Code:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 199px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 198px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}

I'm trying to change my site to have a css for easy changing. I've gotten 1 written that encompasses all styles, however I'm trying to do data as well. Navigational menu, header etc. I'm assuming I ought to be able to have css1 for styles, css2 for data and html page that pulls from each?

Here's my style css:
body {
margin : 0;
padding : 0;
}

body {
background-image:
url('PrairieWindbkg.gif')
}

body {background-color: #0000FF;}




p, ul, ol, li {
font : 10pt Arial,geneva,helvetica;
}

h2 {
font : bold 12pt Arial, Helvetica, geneva;
}


#leftnavigation {
position : absolute;
left : 0;
width : 240px;
margin-left : 10px;
margin-top : 140px;
color : #FFFFFF;
padding : 3px;
}
a:link, a:visited { color: #FFFFFF; }
a:hover, a:active { color: #FFFFFF; }


#leftnavigation {
font : 15pt Arial, Helvetica, geneva;
}


#headnavigation {
position : absolute;
left : 0;
width : 550px;
margin-left : 220px;
margin-top : 10px;
color : #ffffff;
padding : 3px;
}
#headnavigation {
font : 40pt Vivaldi, Helvetica, white, geneva;
}


#content {
margin-left : 10px;
margin-top : 80px;
padding : 3px;
color : #000000;
}

#content h1, #content h2 {
color : #cc0000;
}

#productnavigation {
position : absolute;
left : 0;
width : 950px;
margin-left : 263px;
margin-top : 35px;
color : #ffffff;
padding : 3px;
}
#productnavigation {
font : 25pt Arial, Helvetica, geneva;
}

#counternavigation {
position : absolute;
left : 0;
width : 150px;
margin-left : 350px;
margin-top : 700px;
color : #ffffff;
padding : 3px;
}

It can be seen on http://jewelrybydawn.com/TestCss.html in use.

Now the parts I'm trying to make dynamic/static (?) (ok, universal!) are the left menu, top heading, top menu. Then I want each page to have the jewelry items that apply to it.

I tried making another css along the lines of:
#navbar {
<br><A HREF="Shows.html" TARGET="">Current 2005-2006 Show Schedule!</A>
<P><A HREF="Lampwork.html" TARGET="">Lampwork Beads</A>
<p><A HREF="JewelryClub.html" TARGET="">Jewelry of the Month Club</A>
<P><A HREF="Necklaces.html" TARGET="">Necklaces</A>
<P><A HREF="Bracelets.html" TARGET="">Bracelets</A>
<P><A HREF="Earrings.html" TARGET="">Earrings</A>
<P><A HREF="Personalized_Jewelry.html" TARGET="">Personalized Bracelets</A>
<P><A HREF="Gift_Certificates.html" TARGET="">Gift Certificates</A>
<P><A HREF="samples.html" TARGET="">Jewelry & Bead Gallery</A>
<P><A HREF="Katrina.html" TARGET="">My Hurricane Katrina House Update!</A>
<P><A HREF="Newsletter.html" TARGET="_blank">Current Newsletter</A>
<P></p>

}

so that on each actual page I would have:
<link href="Test.css" rel="stylesheet" type="text/css" />
<link href="TestNavbar.css" rel="stylesheet" type="text/css" />
</head>

<div id="leftnavigation">
<div id="navbar">
</div></div>

OR something to this effect... that way if I kill the Katrina link for example, I don't have to revise every single page, just the TestNavbar.css.

Can anyone help? Thanks!
Dawn

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category.

To view my problem, go to scannerparts.biz

I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer.

-Emerson

Here is the code:

hover.css

Code:

<!--
body {
	behavior: url(/images/csshover2.htc);
}

div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
	position: relative;
	margin: 0px;
	padding: 2px 0px;
	width: 178px;
}

div#categorynav ul.level1 li a {
	position: relative;
	display: block;
	text-decoration: none;
	margin: 0px;
	padding:  0px;
}

div#categorynav ul.level2 li {
	position: relative; 
	display: block;
	text-decoration: none;
	margin: 0px; 
	padding: 0px;
}

div#categorynav ul.level3 li {
	position: relative; 
	display: block;
	text-decoration: none;
	margin: 0px; 
	padding: 0px;
}

div#categorynav ul.level1 ul.level2 a {
	background-color: #000000;
	color: #fff;
	width: 178px;
	font-weight:normal;
	padding: 4px 4px 4px 14px;
}

div#categorynav ul.level2 ul.level3 a {
	background-color: #000000;
	color: #fff;
	width: 178px;
	font-weight:normal;
	padding: 4px 4px 4px 14px;
}

html>body div#categorynav ul.level1 ul.level2 a {
	width: auto;
	padding: 0px; 
	margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
	width: auto;
	padding: 0px; 
	margin: 0px;
}

div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;} 
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
	display: block;
	list-style-image: none;
	list-style-type: none;

	
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
	display: block;
	list-style-image: none;
	list-style-type: none;

	
}

div#categorynav ul.level2 {
	top: 0px;	
	left: 178px;
	margin: 0px;
	padding: 0px;
	width:160px;

} 
div#categorynav ul.level2 li a:hover {
	background-color: #000000;
	color: red;

}

div#categorynav ul.level3 {
	top: 0px;	
	left: 178px;
	margin: 0px;
	padding: 0px;
	width:160px;

} 
div#categorynav ul.level3 li a:hover {
	background-color: #000000;
	color: red;


}

Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there)
Code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>


<style type="text/css">
<!--
/* Style Sheet */
body {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 30px;
	margin-left: 1px;
	background-image: url(/images/backgroundgray.jpg);
	background-repeat: repeat-x;
	background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
	border :0px solid #ffffff;
	width :760px;
	}
#categories{
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 5px 5px 1px 0px;
	font-weight :bold;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
#cat1{
	background-color:#000000;
	color: #ffffff;
	text-decoration:none;
	text-align: left;
	display: block;
	font-weight :normal;
	font-size: 9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width: 178px;
	padding: 0px; 
	}
#cat1 a{
	background-color:#000000;
	color: #ffffff;
	text-decoration:none;
	text-align: left;
	display: block;
	font-weight: normal;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
#cat1 a:hover{
	background-color:#000000;
	color:#ff0000;
	text-decoration:none;
	text-align : left;
	display: block;
	font-weight: normal;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
.leftnav {
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	font-weight :bold;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
	padding : 2px 5px 1px 0px;
	}
.leftnav A:link {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;

	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:visited {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:hover {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ff0000;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:active {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}

.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}

.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}

.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}

-->
</style>
</head>

<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
	<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>

	<tr valign="top">
<!-- left nav -->
		<td bgcolor="#000000">&nbsp;&nbsp;</td>
		<td width="175" bgcolor="#000000">
			<div class="leftnav">
		<!-- store logo -->
			</div>
		
			<div class="leftnav">
				<div style="border-bottom : 0px solid #666666;">&nbsp;</div>
			<!-- home -->
				</div>
			
			<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
	<ul class="level1">                        			 
	<ss:foreach item="category" within="$catalog.categoryList()">
	<ss:sortby item="categorypriority" direction="asc"/>
	<ss:if test="$category.treeLevel == '1'">
	<ss:set name="hasSub" value="0"/>
		<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">

		<ss:set name="hasSub" value="1"/>
		</ss:foreach>
                <li class="submenu">
		<div id="cat1"><ss:link source="$category"/></div>
			<ss:if test="$hasSub == '1'">
			<ul class="level2">
			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
			<ss:sortby item="categorypriority" direction="asc"/>

			<ss:if test="$category.treeLevel == '2'">
			<ss:set name="hasSub" value="1"/>
			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">

                        		<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
                                 	<li class="submenu">
					<div id="cat1"><ss:link source="$subcategory"/></div>
						<ss:if test="$hasSub == '1'">
						<ul class="level3">
						<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
						<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
						</ss:foreach>
						</ul>
						</ss:if>
						</ss:foreach>
						</ul>
						</ss:if></ss:foreach>

					</li>

					</ss:if></ss:if></ss:foreach>
				<br>                      
			 </ul>
			</div> 
			</div>

I'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!!

98.214.188.71/life at excel.htm

Code:

/*******************menu starts********************/  #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;}  #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;}  #menu .divider{width:.5%;  height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;}  #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom;  color:#fff; cursor:pointer;}  #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;}  #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;}  #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;}  .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; }  #menu DIV.sub-mlinks A  { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; }  #menu DIV.sub-mlinks A:hover{ color:#FFF; }  /*******************menu ends********************/     <div id="menu">      <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr>  	 	<td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td>   	 <td class="divider">&nbsp;</td> 	 	<td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td>   	 <td class="divider">&nbsp;</td>  	 	<td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td>   	 <td class="divider">&nbsp;</td>  	 	<td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td>   	 <td class="divider">&nbsp;</td>  	 	<td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td>   	  	      </tr></tbody></table>  	   </div>

Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css.

Here they are below.

drop_down.js:
Code:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList; 

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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body> 
<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul> 
</body>
</html> 

Style2.CSS:
Code:

body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */ 

I'm using the suggestions of those on here and using the
http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..???

I working on a CSS to display a round-shouldered-tab menu. My result is acceptable:
http://rickduley.webs.com/roundShoulderTabMenu.jpg
except for the fact that the tabs are set below the menuBar on which the are supposed to display.

I have run out of ideas. Would someone please set me on the right path?
Thanks.

P.S.: the code is at
http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
you have to delete the 'dot key gee bee' suffix.

Hi folks. I'm hoping someone can help me out. I have a template I've been working with (struggling with).

It has a style sheet attached to it and I'm trying to replace the main, static menu with a drop down Spry Menu.

I've managed to get most of it figured out but my dropdowns aren't colored correctly. The Spry Menu isn't centered on the page. The menu titles are spread out too far also (ie. it's suppose to be "About Me" but the "Me" is way below the "About").

I'm guessing it's probably an easy fix for you all but I've been playing with it all day without a lot of progress. Thank you. Let me know if I should post links.

I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on.
if there is a better way of doing this all please let me know

this is menu.php
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>BHI and Roth's Website menu</title>
<?php
<link rel="stylesheet" type="text/css" href="menu_css.css" />
</head>
<BODY STYLE="background-color:transparent">

<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            
                
                <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="pureCssMenum">
                    <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            

            
                <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="pureCssMenum">
                    <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            
        </ul>
        

        <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenui">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li>
        </ul>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li>
</ul>

</body>
</html> 


<?php
}
          }
          }
else
//if the cookie does not exist, they are taken to the login screen
{
header("Location: login.php");
}
?> 
</html> 





And this is menu_css.css
Code:

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#990033;
	background-repeat:repeat;
	border-color:#FFEE00;
	border-width:1px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#990033;
	border-width:0px;
	border-color:#990033;
	border-style:solid;
	text-align:center;
	text-decoration:none;
	padding:4px;
	_padding-left:4;
	font:normal 11.5px Verdana;
	color: #FFEE00;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;
	padding-right:0;
	width:5;
	height:16;
	display:inline-block;
	background-color:#BB99BB;
	background-image:none;
}
ul.pureCssMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#FFEE00;
	border-color:#0099cc;
	border-style:solid;
	font:normal 11.5px Verdana;
	color: #990033;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#FFEE00;
	border-color:#990033;
	border-style:solid;
	font:normal 11.5px Verdana;
	color: #990033;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}

Hi All,
I'm Ashley; a new member on this forum. I look forward to helping people out, as well as hopefully getting some of my own questions answered too!

I've been designing a website, that I must (must) have up by saturday; I've done all the php back-end development for this site, and it's working great. I'm struggling however with the front-end design.
I'd like to add here, not for sympathy for just to clear this up, that I have a visual impairment, so this is the part I struggle with most; Being totally blind, I have to rely on people with site to tell me exactly what's going on when web designing.

Basically, I have an html template that looks like this:
Code:

<html>
<head>
<title>Test Page</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>This is the top header.</h1>
</div>
<div id="nav">
<ul>
<li>This is main item one, with a list nested inside
<ul>
<li>This is sub item 1.</li>
<li>This list should drop down when main item 1 is hovered over</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1>Content</h1>
<p>All the main content for the page is placed here. </p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<p>Fourth Paragraph</p>
</div>
<div id="leftnav">
<p>This is the left section. It will hold the controls for changing the text size and sharing the page, as well as site statistics</p>
</div>
<div id="rightnav">
<p>This is the right navigation section. It contains the fields for a user to login if they aren't currently, and also contains some basic info</p>
</div>
<div id="footer">
<p>This is the footer.</p> <p>It should be posissioned on the bottom of the page</p>
</div>
</div>
</body>
</html>

This is what I want to happen; the wrap div is the container for everything on the page, and fills the browser screen. The header div goes along the top of the page, and is the width of the entire screen. The nav div goes underneath the header, with the main nav items posissioned in a horizontal line. When, for example, "item1" is hovered over, a list drops down with sub items. The content div should fill a large area of the page underneath the navigation bar, and holds the page content. It should be the width of the entire screen. 'leftnav' and 'rightnav' should be Underneath the content area, posissioned to the left and the right respectively. They should each fill about half the width of the screen, and should not overlap. The footer should then be posissioned along the bottom and fill the entire width.
I'm just not sure how to go about this; i've tried, but everything overlapped, pushed each other out the way, and generally didn't work. If somebody could give me an example that will achieve what i'm trying to achieve (I can add colours etc), It would really be very much appreciated.
I've looked through the w3 CSS guides, and am slowly working through them, though am finding it slightly harder without the visual representation of how it works.
Thanks for any and all help.

Well...
I have a stylesheet linked to all my pages and i want to add some text to the top of each page on the site, i have seen it done befour so don't say it is impossible and no it wasn't in php it was something like this:

</style>
blah blah blah

that was at the end of the stylesheet so the texts is written in html not css, anyone know how to do it caus when i use the code i wrote there it dosn't work for some reason