Again i am stuck on my css coding for the site that I am making. I decided to add the drop down menus on my horizontal nav bar. After adding in all of the coding and tweaking I am still stuck. The image shows as close as I could get the the new navbar aligned. I cant get it to line up with the banner that is 780px wide. Even with a wrapper around the banner and the navbar the banner just wont line up. I had no problem lining up the nav bar correctly before adding the drop-down menus. Can anyone help me figure out what I am doing wrong. Im sure its something simple, so I will just feel stupid after its pointed out to me. Oh, and before I forget. I also have white lines splitting up the background of the nav-bar, I would like to get ride of that also if possible.
Thanks in advanced for the help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Webpage</title>
<meta name="generator" content="WebDesign" />
<style type="text/css">
#wrap{
width:780px;
margin:Auto;
}
ul#navlist {
font-family: sans-serif;
}
ul#navlist a {
width: 4em;
display: block;
border-bottom: none;
padding: 5px 15px;
margin-left: 0px;
background-image:url(nav/Trythis.jpg);
text-decoration: none;
color: #000;
text-align: center;}
ul#navlist, ul#navlist ul, ul#navlist li {
margin: 0px;
padding: 0px;
list-style-type: none;
background-image:url(nav/Trythis.jpg);
float:left;
}
ul#navlist li {
display: inline;
background-image:url(nav/Trythis.jpg);
}
ul#navlist li a {
background-image:url(nav/Trythis.jpg);
padding: none;
border: none;
}
ul#navlist li a:hover {
background-color: #003366;
}
ul#navlist li a:active {
background-color: #003366;
border: 1px #ffffff inset;
}
ul#subnavlist {
display: none;
}
ul#subnavlist li {
float: none;
}
ul#subnavlist li a {
padding: 5px;
margin: 0px;
}
ul#navlist li:hover ul#subnavlist {
display: block;
position: absolute;
font-size:8pt;
padding-top: 0px;
}
ul#navlist li:hover ul#subnavlist li a {
display: block;
width: 10em;
border: none;
padding: none;
}
ul#navlist li:hover ul#subnavlist li a:before { content: " "; }
</style>
</head>
<body>
<div id="wrap">
<div id="banner"><img src="ban/MAYBE3.gif" alt="" name="logo" width="780" height="150" id="logo"/>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="home.htm" id="current">Home</a>
</ul>
</li>
<ul id="navlist">
<li id="active"><a href="page2.htm" id="current">Page2</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>
<ul id="navlist">
<li id="active"><a href="Page3.htm" id="current">Page3</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>
<ul id="navlist">
<li id="active"><a href="Page4.htm" id="current">Page4</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>
<ul id="navlist">
<li id="active"> <a href="Page5.htm" id="current">Page5</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>
<ul id="navlist">
<li id="active"><a href="Page6.htm" id="current">Page6</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>
<ul id="navlist">
<li id="active"><a href="Page7.htm" id="current">Page7 </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>
<ul id="navlist">
<li id="active"> <a href="Page8.htm" id="current">Page8</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>
</ul>
</div>
</div>
</body>
</html>Click to view attachment