CSS - Drop Down Menu Not Aligning

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!

Hi, Ive been asked to create a webpage for a website, the page must be 99% identical to the current website but the problem is I had to build the new page from scratch because a problem with joomla.

While creating the page I ran into a big problem aligning the menu bar. Right now the menu bar lines up exactly how it should on my desktop, but on my laptop which has a much larger screen the menu bar is slide way over to the left.

here's the website Im making a copy for
http://www.curacao.vatcar.org/home/

and here's the page I've made so far
http://brandynstestserver.zymichost.com/flight/downloads.html

I know it still needs alot of tweaking but I just want to solve the menu problem

Heres the HTML, please ignore the comments those are just for the current webmaster (who doesn't know much) until they find another one. Also I just noticed a now unneeded <div id="banner"> tag ignore that too.
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Curacao FIR Downloads</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<script type="text/javascript">
var timeout         = 50;
var closetimer		= 0;
var ddmenuitem      = 0;

function mopen(id)
{	
	mcancelclosetime();

	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

document.onclick = mclose; 
</script>

<body>
<div id="page-background"><img src="images/bg.JPG" width="100%" height="100%" alt="Smile"></div> 
<div id="content"><div id="banner"><center><img src="images/banner.png"/></center></div>
<ul id="sddm">
	<li><a href="http://www.curacao.vatcar.org" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Home</center></a>
		
		
		
	</li>
	<li><a href="http://www.vatcar.org/website/index.php?option=com_content&view=article&id=5&Itemid=40" onmouseover="mopen('m2')" onmouseout="mclosetime()"><center>Roster</center></a>
</li>

		        <li><a href="http://www.vatcar.org/forum/index.php?board=6.0&Itemid=54" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Forum</center></a>
		
		
	</li>
    <li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_jobline&Itemid=61" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Career Opportunities</center></a>
		
		
	</li>
    <li><a href="http://www.curacao.vatcar.org/home/index.php?option=com_content&view=article&id=56&Itemid=66" onmouseover="mopen('m1')" onmouseout="mclosetime()"><center>Contact Us</center></a>
	</li>	
		
			<img src="images/menuspacer.jpg" /></ul>
            
  <table width="982" border="0" cellspacing="0" cellpadding="0" background="images/body.jpg" align="center">
  <tr>
    <td>&nbsp;</td>
    <td><h2>Downloads</h2></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
    <!--Downloads will go under this comment, dont edit anything above this-->
    
    
    
    
    <h2><center>Charts</center></h2><!-- this little piece of code it just a centered heading, hence the <h2> and <center> tags around the words you want to be the heading-->
    
    <!-- use this format to add downloads, type <a href="LINK TO DOWNLOAD HERE">Name of the download</a> and thats it. That code will display text saying what ever you typed in the "Name of the donwload" section and when you click on the words it will download the file that is located in the "LINK TO DOWNLOAD HERE" section. Heres a few working downloads below for you go go off of-->
    
    <center><a href="downloads/charts/TNCA/TNCACharts.zip">TNCA Charts package</a><br /> <!-- The <br /> is just a line break-->
    
    <a href="downloads/charts/TNCB/TNCBCharts.zip">TNCC Charts package</a><br />
    
    <a href="downloads/charts/TNCC/TNCCCharts.zip">TNCB Charts package</a><br /></center>
    
    <h2><center>ATC</center></h2>
    
    <center><a href="downloads/ATC/Training Files.zip">Training package</a><br />
    
    <a href="downloads/ATC/TNCF Control.zip">TNCF Control package</a><br /></center>

    
    
    
    
    
    
    <!-- Dont edit anything below this comment-->
    
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3"><img src="images/bottom.jpg"/></td>
     </tr>
</table>


</div>
</body>
</html>

Heres the CSS
Code:

@charset "utf-8";
/* CSS Document */

html, body {height:100%; margin:0; padding:0; font-family: Arial, sans-serif, Verdana, Helvetica; }

#page-background {position: fixed; top:0; left:0; width:100%; height:100%;}

#content {position:relative; z-index:1; padding:10px;}


#sddm
{	margin:0 0 0px .6em;
	padding: 0;
	z-index: 30
	}

#sddm li
{	margin:0 auto;
	padding: 0;
	text-align: left;
	list-style:none;
	float: left;
	font: bold 15px sans-serif}

#sddm li a
{
	display:block;
	margin-left: auto;
	margin-right: auto;
	padding: 8px 5px;
	background: url(images/mainmenu.jpg) repeat-x left top;
	color: #FFF;
	text-decoration: none
}

#sddm li a:hover
{
	background: #000;
	width:auto;
	font-size: 15px;
}

Thank you in advance for the help!

I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty.

I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line.

For the offending code, please see:
http://www.forma3.com/stuff/css/top_menu_v1.html
http://www.forma3.com/stuff/css/css/right_menu_v1.css

Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed.

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 this theme had an old dropdown menu that was acting weird in some browsers so I updated it with a plugin and now to need to customize it to look a certain way.

There are a few stylesheets at work because of the plugin but I am unable to discern why the "Contact Us" text is off-center in the button. I can see that it seems to be too long, but I don't know why it is favoring the right side of the background, instead of being centered in the background. If someone could help me demystify this I would be MUCH obliged.

I will post a link so that it can be inspected... When I am allowed after 4 more posts!

Please inspect the elements (too much code to post with all different style sheets at play!).

Thank you.

EDIT: here is link: http://drewclifton.com/clients/northern-computer/

You can also see that the dropdown under 'Services' looks funky; I'm thinking a 'sliding door' solution would be appropriate yes? Thank you.

an oxymoron i know it is... but i need my css menu to not drop down, but rather drop up, setting the tag to a negative top: value isnt working either, as not all the pop-up menu's used are the same height.

Any suggestions, or tutorials that you know of?

Hi,

I have this drop down menu, but the parents are appearing under each other, instead of next to each other. I am trying to create a horizontal menu with sub items appear under the parent items.

this is my code:

PHP Code:
#menu2 {
width: 800px;
float:left
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu2 a, #menu2 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu2 h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu2 a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu2 a:hover {
color: #a00;
background: #fff;
}

#menu2 li {position: relative; float:left; width: 200px;}


a.mainlevel{background-color: #000000!important; display:inline-block}

#menu2 ul ul {
position: absolute;
z-index: 500;
float:left
}

#menu2 ul ul ul {
position: absolute;
top: 0;

}

div#menu2 ul ul,
div#menu2 ul li:hover ul ul,
div#menu2 ul ul li:hover ul ul
{display: none;}

div#menu2 ul li:hover ul,
div#menu2 ul ul li:hover ul,
div#menu2 ul ul ul li:hover ul
{display: block;} 





Can anyone see anything wrong?

Many thanks

I had made a site with a pure CSS drop down menu (using hover). The problem is that it works fine in the various browsers... IE6, FF1.x, NS, Opera... But it doesn't work in IE7. Anyone know a work around for using the hover as a drop down with IE7? I can paste the code later (when I get back to where my site is) if needed.

Thanks for any input.

Hey guys,

New to the forum. Mainly came on here to get help with my nav bar. It works perfectly in FF and IE 8.07+, but the problem it with IE8.06, where it doesn't show at all. Not too worried about pre-8.06, only a small amount of my page hits comes from below that version.

I've spent ages looking for a problem, but can't find where I've went wrong. There's may be some superfluous stuff in there that I've added to try and fix the problem.. Please help? =)

------------------------

Code:

#PageList1 ul {
height: 1.5em;
overflow:hidden;
margin: 10px -10px 5px;
width: 100%;
padding: 10px;
background-image:url('http://4.bp.blogspot.com/-WKkxGKrRVcw/TbFWFn_2VxI/AAAAAAAAAis/NKf1k3sO9A8/s1600/nav_bg2.jpg');
background-repeat:repeat-x;
}

#PageList1 li {
height: 1.5em;
list-style-type:none;
float:left;
}

#PageList1 li a {
display:block;
height: 1.5em;
width:auto;
clear:left;
font-weight:bold;
font-size:9pt;
line-height: 0.5em;
margin: -9px 0px -23px;
color: #ffffff;
background-image:url('http://3.bp.blogspot.com/_vhqPwC7csIg/TSUQG6Q3tfI/AAAAAAAAAYU/5ceiGi8na3s/s1600/gradient40px.jpg');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;

padding: 10px 10px 15px;

	border: 1px solid #ccc;
	border-right: 0px solid #ccc;
	border-bottom: 0px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
}
#PageList1 li a:hover, #PageList1 li a.sfhover {
background:transparent;
font-weight:bold;
color: white;
}

#PageList1 li ul {
	left: -999em;
        position: absolute;
	width: 13em; /* Width to help Opera out */
height: auto;	
background-color: #ccc; 
colour:#fff; 
clear: left;
}

#PageList1 li:hover ul, #PageList1 li.sfhover ul {
	left: auto;
	margin: 8px -80px 0px;
width: 13em;
height: auto;
background: #ccc;

}

#PageList1 li:hover li a, #PageList1 li.sfhover li a {
background:#ccc;
	border: 0px solid #ccc;
	border-right: 0px solid #ccc;
	border-bottom: 0px solid #fffccc;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
padding: 0px;
margin: 5px 0px 0px;
    -moz-box-shadow: 0px 0px 0px #000;
    -webkit-box-shadow: 0px 0px 0px #000;
    box-shadow: 0px 0px 0px #000;
	color: #000; 
}
#PageList1 li li a:hover, #PageList1 li li a.sfhover {
	background-color: #ccc; 
color: #fff;}

<script type='text/javascript'>
sfHover = function() {
	var sfEls = document.getElementById("PageList1").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

I have been tasked with building a CSS drop down menu system. I have worked out I can use a hover event to invoke the drop-downs (and hide them again). However. How would I invoke one and keep it visible if they went down to the sub-menu rather than just disappearing because they left the element the hover is applied to?

Alright, I've started to design the other pages on my site. I had to change some things in the code in order for my design to work properly. I didn't have it set up correctly before. So everything works the way I want it to now...except for the drop down menu. I am only a beginner with CSS and do not know much about it. I can't figure out what it is I did that made the navigation stop working. If maybe somebody that is more experienced than myself can take a look at it to see what I did, I would really appreciate it.

Oh yea, here is the link to the beggining stages of my "about" page:
About

Keep in mind, nothing is really for sure yet. I just want to get the coding done, so if you think the page could use some sprucing up, you're not alone. As of now the site works best in Firefox and the drop down menu should appear when "Portfolio" is hovered over.

Here is the link to the CSS:
CSS

Thanks

Ok I am creating a CSS/Javascript Horizontal drop down menu and everything looks great except when I go down and highlight items on my submenu the styles go away on the Menu Item Selected, how can I have those attributes maintain when I go on it's sub elements?

Thanks alot

Seth

Code:

<div id="Nav">
                    <ul class="menu">
                        <li>
                            <a href="#">
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="javascript:showlayer('sm_1')">
                                Profile
                            </a>
                            <ul class="submenu" id="sm_1">
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Resume</a></li>
                                <li><a href="#">About Me</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                Contact
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="javascript:showlayer('sm_2')">
                                Login
                            </a>
                            <ul class="submenu" id="sm_2">
                                <li><a href="#">Friends</a></li>
                                <li><a href="#">Family</a></li>
                                <li><a href="#">Admin</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

Code:

ul, li
{
	margin:0; border:0; padding:0; list-style:none;
}
#Nav
{
	font-size:11px;
	color:#3b5d14;
	font-weight:bold;
	padding:4px;
	height:30px;
	font-family: Lucida Sans;
}
#Nav .menu li 
{
	/*background:url(Images/Light/Left-Menu.png) left top no-repeat;*/
	height:30px;
	float:left;
	margin-right:10px;
}
#Nav .menu li a
{
	color:#F1F1F1;
	width: 75px;
	text-decoration:none;
	padding:0 10px;
	height:30px;
	line-height:30px;
	display:block;
	float:left;
	padding:0 26px 0 10px;
	background:url(Images/Light/Right-Menu-Off.png) right top no-repeat;
	font-family: Lucida Sans;
}


#Nav .menu li a:hover
{
	color:#666666;
	background: url(Images/Light/MenuRight.png) right top no-repeat;
}

#Nav .menu li:hover
{
		
	background: url(Images/Light/Menu-Hover.png) left top no-repeat;
}

#Nav ul .submenu 
{
	border:solid 1px #7ea3bb;
	margin-left: auto;
	margin-right: auto;
	/*border-top:none;*/
	background:#FFFFFF;
	position:relative;
	top:1px;
	width:100px;
	padding:6px 0;
	clear:both;
	z-index:2;
	display:none;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:.95
}
#Nav ul .submenu li
{
	background:none;
	display:block;
	float:none;
	margin:0 6px;
	border:0;
	height:auto;
	line-height:normal;
	/*border-top:solid 1px #DEDEDE;*/
}
#Nav .submenu li a
{
	background:none;
	display:block;
	float:none;
	padding:6px 6px;
	margin:0;
	border:0;
	height:auto;
	color:#105cbe;
	line-height:normal;
}
#Nav .submenu li a:hover
{
	background:#ebf4fa;
}

I am looking for help with creating a CSS drop down menu. I found an example online, but I am unable to make it work for my site. I am trying make a horizontal drop down menu, but the menu is being displayed vertically, can someone please help.
Thanks

Below are my codes:

Code:
CSS

/********************** Header ***************************/


#header {
	margin: 0px 0px 0px 0px;
	background-image:url(images/header.jpg);
	width:717px;
	height:288px;
	position:relative;
}
#header-container
	{
	position: absolute;		
	top: 1em;
	left: 1em;
	}

#header ul{
	background-color:#000000;
	width:711px;
	border: 3px solid #FFFFFF;
	display:block;
	top:255px;
	position:absolute;
	margin: 0px 0px 0px 0px;
	height:22px;
	padding:5px 0px 0px 0px;
	text-align:center;
}
#header a
	{
	text-align: center;
	display:block;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding: 0.3em;
	}
	
#header a:link, #header a:visited, #header a:active	/* menu at rest */
	{
	color: white;
	background-color: #000000;
	text-decoration:none;
	}
	
#header a:hover						/* menu on mouse-over  */
	{
	color: #000000;
	background-color: #CCCCCC;
	text-decoration:none;
	}	
	
#header a.top_parent, #header a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}
	
#header a.parent, #header a.parent:hover 	/* attaches side-arrow to all parents */
	{
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
	}

#header ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:9em;	/* width of all menu boxes */
	/* NOTE: For adjustable menu boxes you can comment out the above width rule.
	However, you will have to add padding in the "#menh a" rule so that the menu boxes
	will have space on either side of the text -- try it */
	}

#header li
	{
	position:relative;
	min-height: 1px;		/* Sophie Dennis contribution for IE7 */
	vertical-align: bottom;		/* Sophie Dennis contribution for IE7 */
	}

#header ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}

#header ul ul ul
	{
	top:0;
	left:100%;
	}

div#header li:hover
	{
	cursor:pointer;
	z-index:100;
	}

div#header li:hover ul ul,
div#header li li:hover ul ul,
div#header li li li:hover ul ul,
div#header li li li li:hover ul ul
{display:none;}

div#header li:hover ul,
div#header li li:hover ul,
div#header li li li:hover ul,
div#header li li li li:hover ul
{display:block;}

Code:
HTML

<div id="container">


	<div id="header">
			<ul>
				
			<li><a href="index.html">Home</a></li>
			
			
			<li><a href="fbstats.html">Football</a></li>
				
			<li><a href="bbstats.html">Baseball</a></li>
			<li><a href="bio.html">Biography</a></li>

			<li><a href="televison.html">Television</a></li>
			<li><a href="cdbuy.html">CD/Book</a></li>
			<li><a href="video.html">Videos</a></li>
		</ul>
	</div>