please help menuing system

**Zakery** · Nov 4, 2003 15:27

Hi all,

I'm trying to create a menu where I have left navigation and also top navigation. I'm doing it all in css and html. I wish to use lists for both the top and left menus but I can't get it to work in more than one browser. Soon as I get it working in one it breaks in another.

Here is the code I am using... Anyone have any ideas?

Thanks
John.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
body{font-family: Arial, Helvetica, sans-serif;margin:0px; padding:0px;}

#vertnav
{
position:absolute;
width: 160px;
top:120px;
left:20px;
}

#vertnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
}

#vertnav li
{
border-bottom:1px solid #fff;
}

#vertnav a
{
display: block;
padding: 3px;
width: 140px;
background-color: #036;
}

#vertnav a:link, #vertnavlist a:visited
{
color: #EEE;
text-decoration: none;
border-left:10px solid #333;
}

#vertnav a:hover
{
background-color: #369;
color: #fff;
border-left:10px solid #999;
}

#navcontainer
{
position:absolute;
top:120px;
left:122px;
}

#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
margin-right:-2px;
}

#navlist a { width:140px; padding: 3px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
border-left:10px solid #333;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
border-left:10px solid #999;
}

</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#">I</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<div id="vertnav">
<ul id="vertnavlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</body>
</html>