CSS - First Time Creating Horizontal Menu Using Ul And Li Tags & Css...

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'm not sure if the title describes exactly what I mean, but here it goes.

I'm working on this website: http://denartcc.org/d/

The menu along the top has images that change position when you hover over them. The thing that I'm trying to do is create something that looks like this site's menu: http://www.aopa.org/ Notice how hovering over one of the menu items reveals another blue bar that contains more links. This is what I'm trying to create.

Unfortunately I'm stuck when it comes to comparing these side-by-side, and I just don't know how to create that secondary set of links. The code I'm using is below.

CSS:
Code:

#amenu {
	list-style: none;
	padding: 0;
	margin:auto 0 0 0;
	width: 930px;
	height: 30px;
	background-color: black;
	position: relative;
	border-bottom:medium solid white;
	float:left;
}
#amenu ul  {
	display: none;
	position: absolute;
}

#amenu ul li {
	}

#amenu li a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}

.home {
	width: 120px;
	height: 30px;
	background: url(../images/menu/home.png) no-repeat;
	left: 20px;
	top: 0px;
}

.airspace {
	width: 163px;
	height: 30px;
	background: url(../images/menu/airspace.png) no-repeat;
	left:160px;
	top:0;
}

.community {
	width: 174px;
	height: 30px;
	background: url(../images/menu/community.png) no-repeat;
	left:343px;
	top:0;
}

.controllers {
	width: 195px;
	height: 30px;
	background: url(../images/menu/controllers.png) no-repeat;
	left:537px;
	top:0;
}

.pilots {
	width: 174px;
	height: 30px;
	background: url(../images/menu/pilots.png) no-repeat;
	left:752px;
	top:0;
}

#amenu a:hover {
	background-position: left bottom;
}

#amenu a:hover span{
	display: block;
}

HTML
Code:

<div>
		<ul id="amenu">
			<li><a href="#" class="home">Home<span></span></a></li>
			<li>
			<a href="#" class="airspace">Airspace<span></span></a>
				<ul>
				<li>ZDV Airports</li>
				<li>Preferred Routing</li>
				<li>Try Something New</li>
				</ul>
			</li>
			<li><a href="#" class="community">Community<span></span></a></li>
			<li><a href="#" class="controllers">Controllers<span></span></a></li>
			<li><a href="#" class="pilots">Pilots<span></span></a></li>
		</ul>
	</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 */ 

Something like this gives real thick and uneven borders, is it possible to make the borders combine and become one single border when they are next to each other?

I don't want to use seperate border-top border-left etc ...

Thank you.

Code:

<HTML>
	<HEAD>
		<style type="text/css">
			div.table div
			{
				border			: 1px solid black;
				/* border-collapse		: collapse; */
			}
			div.table div.tr
			{
				clear			: both;
			}
			div.table div.tr div.th
			{
				float			: left;
				font-weight		: bold;
				width			: 25%;
			}
			div.table div.tr div.td
			{
				float			: left;
				width			: 25%;
			}
		</style>
	</HEAD>
	
	<BODY>
		<div class="table">
				<div class="tr">
					<div class="th">column 1</div>
					<div class="th">column 2</div>
					<div class="th">column 3</div>
					<div class="th">column 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">numAAA 1</div>
					<div class="td">numA 2</div>
					<div class="td">numAAAA 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
		</div>
	</BODY>
</HTML>

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