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? :confused:
<!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
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? :confused:
<!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