I am redesigning one of my sites, I have spent alot of time trying to get the second tier (li ul li) to space horizontally properly like the first tier. I cannot see what I am doing wrong. on another question, is the width of my working space too wide, (1000 px). Thanks for any feedback. The code follows…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>New Site</title>
<style type="text/css">
html,body {
padding:0;
margin:0;
}
.wrapper {
position:relative;
margin-left: auto;
margin-right: auto;
width:1000px;
height: 100%;
}
.logo {
position:absolute;
top:0;
left:0;
}
.nav {
width:100%;
height:30px;
background-color:#0A3881;
position:fixed;
margin-left: auto;
margin-right: auto;
left:0px;
top:0px;
}
.nav1 {
position: relative;
color: white;
margin: 0px auto;
width: 1000px;
line-height: 2em;
}
.nav1 ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav1 ul li{
padding-left: 10px;
padding-right: 10px;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border-right:2px orange solid;
}
.nav1 li ul {
position:absolute;
top:45px;
left:225px;
display: inline;
padding-right:15px;
}
.nav1 li ul li {
position:relative;
width:100px;
height:150px;
background-color:green;
}
.about {
float: right;
}
.about ul {
margin: 0;
padding: 0;
float:right;
}
.about ul li {
display: inline;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding-left:15px;
}
.nav2 li ul {
}
</style>
</head>
<body style="padding:0px;">
<div class="nav"><div class="nav1">
<ul>
<li>
Button 1<ul>
<li>
Tier 2 - 1
</li>
</ul>
</li>
<li>
Button 2
<ul>
<li>
Tier 2 - 2
</li>
</ul>
<li>
Button 3
<ul>
<li>
Tier 2 - 3
</li>
</ul>
<li>
Button 4
<ul>
<li>
Tier 2 - 4
</li>
</ul>
<li>
Button 5
<ul>
<li>
Tier 2 - 5
</li>
</ul>
<li>
Button 6
<ul>
<li>
Tier 2 - 6
</li>
</ul>
<li>
Button 7
<ul>
<li>
Tier 2 - 7
</li>
</ul>
<li>
Button 8
<ul>
<li>
Tier 2 - 8
</li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<div class="logo">
<img alt="" height="168" src="images/SomeLogo.png" width="218" /></div>
<div class="about">
<ul>
<li>
Contact Us
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="nav2">
</div>
</div>
</div>
</body>
</html>
