CSS Multi-Level Horizontal nav menu

**krisjohnson** · 11-08-2008, 08:04 AM

I've been trying to build on my knowledge of CSS.

So this week I created a basic CSS Tabs menu -- with a some help from the bright folks that use this forum.

So now I'm trying my hand at a Multi-level menu. I found an example to attempt and study the example and tried to reproduce it.

It nearly works except for one small, but important issue -- I cannot get the secondary menu to line up horizontally.

I've learned alot from walking through this and re-reading parts of the books I have on CSS.

Here's what I thought that would be the best solution:

I've tried adding a "float: left" tag in the secondary navlist "li" list in the stylesheet.

I've attached the stylesheet and the HTML code is below. The stylesheet has some comments that gives the link to the actual example I reviewed.

So, now I'm looking for an experienced voice to chime in.

What am I missing?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Horizontal in a Horizontal Menu Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">@import url("hih_navtabs.css"); </style>
</head>

<body>
<div id="navcontainer">
	<ul id="navlist">
		
    <li id="active"><a href="#" id="current">Item one</a> 
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
        <li><a href="#">Subitem two</a></li>
        <li><a href="#">Subitem three</a></li>
        <li><a href="#">Subitem four</a></li>
      </ul>		
		</li>
		
    <li><a href="#">Item two</a></li>
		
    <li><a href="#">Item three</a></li>
		
    <li><a href="#">Item four</a></li>
	</ul>
</div>
</body>
</html>

CSS: Attached

**Snookerman** · 11-08-2008, 09:29 AM

Add this to your doctype:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Also, you might have to change the height of your subnavlist:

Code:

#navlist ul#subnavlist {
	position: absolute;
	width: 100%;
	left: 0;
	top: 1.25em;
	height: 0.8em;
	margin: 0;
	padding: 0;
	border-bottom: 3px solid #f63;
	white-space: nowrap;
}

**krisjohnson** · 11-10-2008, 08:28 AM

Snookerman:

Wow! That did make a difference. Thanks!

I'll need to review the Doctype section in my books
It was only a small section in each one -- pretty powerful though.

Ok -- now I can creat a version of my own and applied what I learned here

Thanks again.

**Snookerman** · 11-10-2008, 02:41 PM

No problem, remember to add the Resolved prefix to this thread by editing your first post.

Thread: CSS Multi-Level Horizontal nav menu

Thread Tools

Search Thread

CSS Multi-Level Horizontal nav menu

The Following User Says Thank You to Snookerman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions