firefox unordered list, linking problem

[jynx]

the red border shows me that firefox is making the whole list item a link, however i can only click where the background image shows up. i directly linked the picture, but let me know if thats not allowed, ill just upload the pic..btw in IE the whole list item works as a link

#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #CCC;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}

#nav h2{
float: right;
display: block;
padding: 6px 30px 6px 5px;
margin: 0 auto;
text-decoration: none;
font-weight: bold;
font-size: 90%;
color: #333;
}

#nav li {
float: left;
position: relative;

}

#nav li a {
float: left;
padding: 6px 30px 6px 5px;
text-decoration: none;
font-weight: bold;
font-size: 90%;
border: solid;
border-color: red;
color: #333;
background: #CCC url("http://summitpcg.com/images/nav_slant.gif") no-repeat top right;
}

#nav #nav-1 a {
padding-left: 20px;/*20*/
}

#nav a:hover {
color: #000;
}

ul#nav ul li {
list-style: none;
text-align: left;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul#nav ul li a {
min-width: 100px;
text-decoration: none;
color: #777;
/*background: #fff url(/SPCG/grad.gif) top repeat-x 20px;*/
background: #FFF;
padding: 5px;
border: 1px solid #ccc;
}

ul#nav li ul {
position: absolute;
display: none;
list-style: none;
width: 100%;
}

ul#nav li:hover > ul {
display: block;
left: -60px;
padding-top: 28px;
}

/* first menu spacing to compensate for left:-60 alignment */
.firstMenu{left: 10px;}


<!-- START nav -->

<div>
<ul id="nav">
<li id="nav-1"><a href="/aboutus.php">ABOUT US</a>
<ul>
<li class="firstMenu"><a href="/founder.php">Founder's Message</a></li>
<li class="firstMenu"><a href="/approach.php">Our Approach</a></li>
</ul>

</li>
<li><a href="/capital.php">CAPITAL</a>
<ul>
<li><a href="/mission.php">Our Mission</a></li>
<li><a href="/advantage.php">The SPCG Advantage</a></li>
</ul>
</li>

<li><a href="/capabilities.php">CAPABILITIES</a>
<ul>
<li><a href="/tools.php">The Right Tools</a></li>
</ul>
</li>

<li><a href="/focus.php">FOCUS</a>
<ul>
<li><a href="/investors.php">Investors</a></li>
<li><a href="/privfinancing.php">Private Financing</a></li>
<li><a href="/corpfinancing.php">Corporate Financing</a></li>
<li><a href="/busrevitilazation.php">Business Revitalization</a></li>
</ul>
</li>

<li><a href="/resources.php">RESOURCES</a>
<ul>
<li><a href="/executivepartners.php">Executive Partners</a></li>
<li><a href="/specialsituation.php">Special Opportunities</a></li>
<li><a href="/glossary.php">Glossary</a></li>
</ul>
</li>

<li><a href="/contact.php">CONTACT</a>
</li>

<h2>CAPITAL | REDEFINED.</h2>

</ul>



</div>



<!-- END nav -->

this can be found live on hxxp://summitpcg.com/founder.php..i can't seem to figure it out, its bugging the heck out of me!

[abduraooft]

Could you be a little more precise on the issue? I don't see a red border or any other issue in FF

[jynx]

in the code i posted above, there is a red border. that red border is assigned to the base menu just to show you the boundaries of the button. however on the live version the red border is not there. but here is what is going on, in Firefox, when you hover over any of the base menu links, except 'CONTACT', there is no link. For instance, if you hover on the word 'resources', it should be a link, yet it does not show up as one. Yet if you go just a little to the right of the word 'resources', the diagonal line becomes the link.

In the case of the word 'Contact', it is the only menu without a dropdown part, so I am guessing this has something to do with it, which is why the contact button is the only one that works properly. how can i fix it, and sorry for not being so clear

[abduraooft]

Hiya, now it's clear :) ..and you'd also get an idea, if you put a border on ul#nav li ul . ie the sub-menu block is positioned over the links.

[jynx]

ok i see what you mean..

in
ul#nav li:hover > ul {
display: block;
left: -60px;
/*padding-top: 28px;*/
}

i took out the padding-top which is causing that extra space above the dropdown menu, however now the menu doesnt come up underneath the base menu, it appears right on top of the base menu. how would i position it below the base menu?

[jynx]

i got it! i just changed it to margin-top...awesome, thanks so much abduraooft