Nav Buttons CSS - Dropdown Issue

[leighchic]

Hi, I have posted another similar question on your forum - here: http://www.webdeveloper.com/forum/sh...d.php?t=259802
But now the client wants a drop down menu on this website, and I am having a very similar problem with the CSS styling - Specifically hover states for this.

You will see what the issue is if you preview below. The hover states are not matching up with the navigation bar and I just don't know how to get this right. Also, The secondary navigation should start at the bottom of the NavBar - not as far up as it is.

This is the site (with drop-downs now)
http://www.leighdesignstudio.com/ite...t-navDrop.html

My code is:
-------------------------------

<div class="navBar">


<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#" rel="ddsubmenu">iServices</a></li>
<li><a href="#">iQuote</a></li>
<li><a href="#">iFaqs</a></li>
<li><a href="#">iAbout</a></li>
<li><a href="#">iContact</a></li>

</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<!--Top Drop Down Menu 1 HTML-->

<ul id="ddsubmenu" class="ddsubmenustyle">
<li><a href="#">iPhone</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPod</a></li>
<li><a href="#">iT</a></li>
</ul>

</div>

Relavant CSS code is:
-------------------------------

.navBar {
width:1000px;
height:47px;
background-image:url(images/backNav.jpg);
background-repeat:repeat-x;
float:left;
margin-top:30px;
}

.mattblackmenu ul{
margin: 0;
padding: 0;
font-family:Verdana, Geneva, sans-serif;
list-style-type: none;
overflow: hidden;
width: 100%;
height:47px;
}

.mattblackmenu li{
display: inline;
margin: 0;

}

.mattblackmenu li a{
float: left;
display: block;
font-weight:regular;
font-size:15px;
text-decoration:none;
margin: 0;
padding:0.0em 2.1em;
margin-top:10px;
background-image:url(../images/navDivider.jpg);
background-position:right;
background-repeat:no-repeat;
color: white;
}

.mattblackmenu li a:visited{
color: white;
}

.mattblackmenu li a:hover{
background-image:url(../images/navHover.jpg);
background-repeat:repeat-x;
height:47px;
}

.ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
background: #929292;
visibility: hidden;
z-index: 100;
text-align:left;
padding-top:7px;
padding-bottom:7px;
}

.ddsubmenustyle li {
list-style:none;
}


.ddsubmenustyle li a{
display: block;
width: 109px; /*width of menu (not including side paddings)*/
color: #000000;
text-decoration: none;
font-family:verdana;
font-size:13px;
padding:4px;
padding-left:29px;
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
list-style-type:none;
}

.ddsubmenustyle li a:hover{
background-color: #afafaf;
color: #000000;
}

[webjunke]

Have you tried giving ".ddsubmenustyle, .ddsubmenustyle ul" a top margin to bring it down?

[leighchic]

Yes, I have. It all does the same thing.
The problem is that I need my text to sit in the middle - with the NavDivider -BUT the hover state must take up the entire height of that navBar - and so I cant get it to work, but I know there must be a way.

[leighchic]

Sorry - that also doesn't work - because then you cant click on the sublinks.

[leighchic]

Please see attached. To the left pic is how it is looking . To the Right - this is how it needs to look.