Horizontal Navigation & IE issue

**shamrox** · Aug 31, 2006 06:34

Can anyone tell me how to make this work in IE? Works fine in Safari, etc. I've searched but can't seem to find the IE work around.
It's supposed to be a CSS horizontal navigation, that when you mouse over the top level menu, you get a vertical drop down menu.
Thanks for any help.

Code:

<ul class="nav">
<li><strong>a navigation item</strong>
	<ul>
	<li>a navigation list item</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</li>
<li><strong>a navigation item</strong>
	<ul>
	<li>another navigation list item</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</li>
<li>Etc</li>
</ul>

Now the CSS part

Code:

/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
	margin: 0;
	padding: 0;
	cursor: default;
	list-style-type: none;
	display: inline;
}

ul.nav{
	display: table;
}
ul.nav>li{
	display: table-cell;
	position: relative;
	padding: 2px 6px;
}


ul.nav>li:hover{
	padding-right: 1px;
} 

ul.nav li>ul{
/*Make the sub list items invisible*/
	display: none;
	position: absolute;
	max-width: 40ex;
	margin-left: -6px;
	margin-top: 2px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
	display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
	display: block;
	padding: 2px 10px;
}

/*** Menu colors (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
	background-color: #fff;
	color: #369;
}


ul.nav li:hover,
.nav ul li a:hover{
	background-color: #369;
	color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
	background-color: #036;
	color: #fff;
}

ul.nav,
.nav ul{
	border: 1px solid #369;
}

.nav a{
	text-decoration: none;
}

**Dan Schulz** · Aug 31, 2006 07:31

Since I highly doubt you're going to have more than one menu that runs horizontally across the page, I'd give it an ID instead of a class.

Therefore, your markup would change from your current HTML to this:

HTML Code:

 <ul id="nav">
 	<li><a href=""><strong>Menu Link</strong></a>
 		<ul>
 			<li><a href="">Menu Link</a></li>
 			<li><a href="">Menu Link</a></li>
 			<li><a href="">Menu Link</a></li>
 			<li><a href="">Menu Link</a></li>
 		</ul>
 	</li>
 	<li><a href=""><strong>Menu Link</strong></a>
 		<ul>
 			<li><a href="">Menu Link</a></li>
 			<li><a href="">Menu Link</a></li>
 			<li><a href="">Menu Link</a></li>
 			<li><a href="">Menu Link</a></li>
 		</ul>
 	</li>
 	<li><a href="">Menu Link</a></li>
 </ul>

Then, use the following CSS (style its appearance to taste):

Code:

 #nav, #nav ul {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
 #nav li {
 	display: inline;
 	float: left;
 }
 #nav ul {
 	display: none;
 	position: absolute;
 }
 #nav li:hover ul, #nav li.menuHover ul {
 	display: block;
 }
 #nav ul li {
 	display: block;
 	clear: left;
 }
 #nav a {
 	display: block;
 	padding: 0 5px;
 	width: 100%:
 }

The declaration of #nav li.menuHover ul is used since I'm going to use a dash of JavaScript to make the menu work in IE 5, 5.5 and 6. The script is below:

Code:

 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+=" menuHover";
 				}
 				node.onmouseout=function() {
 		    	    this.className=this.className.replace(" menuHover", "");
 				}
 			}
 		}
 	}
 }
 window.onload=startList;

Put this in the <head> section of your document (I'm saying this because I've actually seen people try to put it in the <body> of their documents).

For more information on dropdown menus, check out this post I wrote in the "Best Way to Make Dropdowns" thread:

http://www.sitepoint.com/forums/show...38&postcount=6

**shamrox** · Aug 31, 2006 07:49

I just tested this and it's spot on. Thanks for taking the time for a very detailed posting.

**Dan Schulz** · Aug 31, 2006 08:34

No problem. If you have any other questions, my PM box is always open

.

User Tag List

Thread: Horizontal Navigation & IE issue

Thread Tools

Display

Horizontal Navigation & IE issue

Bookmarks

Bookmarks

Posting Permissions