Hello,I am working on http://stage.munciecivic.orgHere is the the nav bar I am working on for it: http://stage.munciecivic.org/testnav.htmlI am trying to get the navigation menu to look right, but I can't seem to figure it out completely. My Two biggest problems are the white space between the links and the background image showing up on the sublinks.It needs to be 720px wide.Here is a screenshot of what the dropdown menu needs to look like:Any help on getting this to look correctly would be greatly appreciated.Here is the CSS:
#nav ul { margin: 0 auto; border: 0 none; width: 720px; /*For KHTML*/ list-style: none; height: 33px; z-index: 10000;}#nav ul li { border: 0 none; float: left; /*For Gecko*/ display: inline; list-style: none; margin: 0; position: relative; height: 48px;}#nav ul ul { border: 0 none; width: 100px; list-style: none; display: none; position: absolute; top: 32px; left: -40px; z-index: 100000;}#nav ul ul:after /*From IE 7 lack of compliance*/{ clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden;}#nav ul ul li { border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; width: 100px; float: left; /*For IE 7 lack of compliance*/ display: block !important; display: inline; /*For IE*/ height: 28px;}/* Root Menu */#nav ul a { border-left: 1px solid #222; padding: 16px 15px; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; color: #fff; text-align: left; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ line-height: 20px;}#nav ul li a.last { border-right: 1px solid #222;} #nav ul ul a { border: 0 none; } #nav ul ul a.last { border-right: none; }/* Root Menu Hover Persistence */#nav ul a:hover,#nav ul li:hover a,#nav ul li.iehover a,#nav ul a#current { background-color: #fff; color: #fff; text-decoration: none;}/* 2nd Menu */#nav ul li:hover li a,#nav ul li.iehover li a { background-color: #5e605f; float: none; color: #fff; padding: 0; text-decoration: none;}/* 2nd Menu Hover Persistence */#nav ul li:hover li a:hover,#nav ul li:hover li:hover a,#nav ul li.iehover li a:hover,#nav ul li.iehover li.iehover a { background-color: #fffbda; color: #333; text-decoration: underline;}/* 3rd Menu */#nav ul li:hover li:hover li a,#nav ul li.iehover li.iehover li a { color: #666;}/* 3rd Menu Hover Persistence */#nav ul li:hover li:hover li a:hover,#nav ul li:hover li:hover li:hover a,#nav ul li.iehover li.iehover li a:hover,#nav ul li.iehover li.iehover li.iehover a { color: #fff;}#nav ul ul ul,#nav ul ul ul ul { display: none; position: absolute; top: 0; left: 160px;}/* Do Not Move - Must Come Before display:block for Gecko */#nav ul li:hover ul ul,#nav ul li:hover ul ul ul,#nav ul li.iehover ul ul,#nav ul li.iehover ul ul ul { display: none;}#nav ul li:hover ul,#nav ul ul li:hover ul,#nav ul ul ul li:hover ul,#nav ul li.iehover ul,#nav ul ul li.iehover ul,#nav ul ul ul li.iehover ul { display: block;}.nav_about a { width: 80px; height:33px; background: url(images/nav_about.gif) no-repeat; }.nav_about a:hover { background-position: 0 -33px; }.nav_mainstage a { width: 84px; height: 33px; background: url(images/nav_mainstage.gif) no-repeat; }.nav_mainstage a:hover { background-position: 0 -33px; }.nav_studiotheatre a { width: 115px; height: 33px; background: url(images/nav_studiotheatre.gif) no-repeat; }.nav_studiotheatre a:hover { background-position: 0 -33px; }.nav_boxoffice a { width: 85px; height: 33px; background: url(images/nav_boxoffice.gif) no-repeat; }.nav_boxoffice a:hover { background-position: 0 -33px; }.nav_education a { width: 85px; height: 33px; background: url(images/nav_education.gif) no-repeat; }.nav_education a:hover { background-position: 0 -33px; }.nav_volunteer a { width: 85px; height: 33px; background: url(images/nav_volunteer.gif) no-repeat; }.nav_volunteer a:hover { background-position: 0 -33px; }.nav_backstage a { width: 82px; height: 33px; background: url(images/nav_backstage.gif) no-repeat; }.nav_backstage a:hover { background-position: 0 -33px; }.nav_contact a { width: 104px; height: 33px; background: url(images/nav_contact.gif) no-repeat; }.nav_contact a:hover { background-position: 0 -33px; }
And Here is the HTML:
<div id="nav"> <ul class="nav"> <li class="nav_about"><a href="#"></a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="nav_mainstage"><a href="#"></a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="nav_studiotheatre"><a href="#"></a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="nav_boxoffice"><a href="#"></a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="nav_education"><a href="#"></a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="nav_volunteer"><a href="#"></a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="nav_backstage"><a href="#"></a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li class="nav_contact"><a href="#"></a> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> </ul></div>
