Navbar CSS Help please

**garrinh** · Mar 10, 2009 17:13

I'm trying to create a Navbar that looks something like this:

- Main navbar (horizontal)
- Subnav (horizontal)

You rollover one of the items on the main navbar, and instead of a dropdown menu, you see the dropdown items displayed horizontally on a Subnav bar. I don't care if it has tabs or no tabs, just need this functionality.

Does anyone know where I can find the CSS/HTML code for this type of navbar? My main concern is that the CSS is solid - needs to work on IE7, IE6 and Firefox. Thanks so much for your help.

**houstonmarketing** · Mar 10, 2009 23:21

Are you hard-coding the html and css, or are you using any editing programs?

**Erik J** · Mar 11, 2009 00:12

Hi garrinh, welcome to SitePoint!

Originally Posted by garrinh

I'm trying to create a Navbar that looks something like this:

- Main navbar (horizontal)
- Subnav (horizontal)
...

Have not seen your attached image yet.

Here is a crossbrowser working demo you can try out for a start:

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horizontal Dropdown</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#horizontalmenu,
#horizontalmenu ul{
	position: relative; /* set mainlist as a reference for the sublist *//* the sublist gets AP below */
	width: 600px;
	margin: 0;
	padding: 0;
	background: #fff; /* IE needs bg-color to hover the sublist gap */
}
#horizontalmenu li{
	float: left; /* line up the items within the list width */
	background: #efe;
	list-style-type: none;
}
#horizontalmenu a{
	float: left;
	position: relative; /* make IE6 show the negative margin edges */
	margin: 0 -1px -1px 0;
	border: 1px solid #666;
	padding-top: 4px; /* vertical center the text */
	width: 119px;
	height: 20px; /* give space for larger user font-size */
	background: #efe;
	color: #666;
	line-height: 1; /* for lesser move when user font changes, (default is ~ 1.2 times the font-size) */
	text-align: center;
	text-decoration: none;
}
#horizontalmenu a:hover{
	background: #cdc;
	color: #333;
}
#horizontalmenu ul{
	position: absolute; /* position the submenu according to ancestor's position (here the main ul) */
	top: 26px; /* the referenced main ul height */
	left: 0;
	margin-left: -9999px; /* hide the submenu */
	padding-top: 10px; /* optional gap */
}
#horizontalmenu li:hover ul,
#horizontalmenu li.sfhover ul{ /* IE6 fake hover */
	margin-left: 0; /* show the submenu */
}
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("horizontalmenu").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>
<![endif]-->
</head><body>
 
<ul id="horizontalmenu">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a>
		<ul>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
			<li><a href="#">Link 6</a></li>
			<li><a href="#">Link 7</a></li>
			<li><a href="#">Link 8</a></li>
			<li><a href="#">Link 9</a></li>
		</ul>
	</li>
	<li><a href="#">Link 10</a></li>
	<li><a href="#">Link 11</a></li>
	<li><a href="#">Link 12</a></li>
</ul>
 
</body></html>

**Erik J** · Mar 11, 2009 04:15

Originally Posted by garrinh

...
Does anyone know where I can find the CSS/HTML code for this type of navbar?
...

Right here on SitePoint ofcourse.

I had an unexpected short break so I coded an inline navbar with an inline horizontal dropdown, all centered. Explained in the comments for you to tweak:

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Inline Horizontal Dropdown</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#nav{
	position: relative; /* sets the mainlist as a reference for the sublist */
	margin: 0; /* reset the default left margin in IE */
	padding: 0; /* reset the default left padding in good browsers */
	width: 100%;
	height: 2.4em;
	font: 900 68%/2.4 verdana; /* line-height same as the ul height to center the text, (default is ~ 1.2 times the font-size) */
	text-align: center; /* center all inlines */
	background: #010066;
}
#nav ul{
	position: absolute; /* position the subnav according to nearest positioned ancestor (here the main ul) */
	top: 1.7em; /* IE to not drop hover, ul starts close below the text */
	left: 0;
	margin-left: -9999px; /* hide the subnav */
	border-top: .7em solid #010066; /* IE to not drop hover, the intended gap between text and sublist is covered with a border */
	padding: 0; /* reset the default left padding in good browsers */
	width: 100%;
	height: 2.4em;
	background: #91ad47;
}
#nav li:hover ul,
#nav li.sfhover ul{ /* IE6 hover faked by the class sfhover */
	margin: 0; /* show the subnav */
}
#nav li{
	display: inline; /* line up the items within the list width  */
	padding: 0 2em; /* only side padding/margin applies on inlines */
}
#nav a{
	color: #9bcdff;
	text-decoration: none;
	text-transform: uppercase;
}
#nav li:hover a, /* all links on hover */
#nav li.sfhover a{ /* IE6 fake hover */
	color: #0133ff;
}
#nav ul a:hover{ /* sublist links on hover, same specificity overrides the before rule */
	color: #04016a;
}
</style>
<!--[if lte IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
	var sfEls = document.getElementById("nav").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>
<![endif]-->
</head><body>
 
<ul id="nav">
	<li><a href="#">panels &amp; parties</a></li>
	<li><a href="#">venues</a>
		<ul>
			<li><a href="#">closing night</a></li>
			<li><a href="#">tickets</a></li>
			<li><a href="#">passes</a></li>
		</ul>
	</li>
	<li><a href="#">media</a></li>
	<li><a href="#">faq</a></li>
	<li><a href="#">sponsors</a></li>
</ul>
 
</body></html>

**garrinh** · Mar 11, 2009 06:14

Thanks so much guys. I'm using Dreamweaver CS3 for editing -- I do know about their Spry feature, but would rather hard code the CSS than use that, which I've found cumbersome in the past.

**garrinh** · Mar 11, 2009 06:29

Erik - you rock! I'm going to try what you suggested when I get into work this morning. Thanks so much.

User Tag List

Thread: Navbar CSS Help please

Thread Tools

Display

Navbar CSS Help please

Centered Inline Horizontal Dropdown

Bookmarks

Bookmarks

Posting Permissions