Page 1 of 1

Dropdown Nav Bar

Posted: Wed Aug 04, 2010 8:52 am
by Dominic Belfiori
Hey guys,
I've been working on a dropdown nav bar and it works great in Firefox, but with IE or Safari there is to much space generated underneath the navbar. Do you guys have any suggestions as to how to fix this?

Here is the CSS:

<style type="text/css">

.newinv ul {
padding:0;
margin:0;
list-style-type:none;
}
.newinv ul ul {

}

.newinv li {
float:left;
width:100px;
position:relative;
}
/* style the links for the top level */
.newinv a, .newinv a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#ffffff;
width:100;
height:40px; /*How tall your cells are*/
border:0px solid #ffffff;
border-width:0px 0px 0 0;
background:#f53d01;
padding-left:0px;
line-height:40px;


}

* html .newinv a, * html .newinv a:visited {
width:100px;
w\idth:100px;
}

.newinv ul ul {
visibility:hidden;
position:absolute;
height:0;
top:px;
left:0;
width:125px; /* Size of the daughter cells */
}

* html .newinv ul ul {
top:0px;
t\op:0px; /* IE gap between main bar and the dropdown items */
}

.newinv table {position:absolute; top:0; left:0;}


.newinv ul ul a, .newinv ul ul a:visited {
background:#d23500;
color:#ffffff;
height:auto;
line-height:1em;
padding:5px 10px;
width:110px

}
* html .newinv ul ul a{
width:125px;
w\idth:129px;
}


/* style the top level hover */
.newinv a:hover, .newinv ul ul a:hover{
background:#ffffff;
}
.newinv :hover > a, .newinv ul ul :hover > a {
color:#ffffff;
background:#f53d01;
}

.newinv ul :hover ul{
visibility:visible;
}

.newinv ul :hover ul ul{
visibility:hidden;
}

.newinv ul :hover ul :hover ul ul{
visibility:hidden;
}

.newinv ul :hover ul :hover ul{
visibility:visible;
}

.newinv ul :hover ul :hover ul :hover ul {
visibility:visible;
}
</style>

Here is the HTML

<div class="newinv">

<ul>
<li><span class="style3"><a STYLE= "color: #ffffff;text-decoration:none" href="#">New Inventory</span></a>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>

<li><a href="http://www.appleacura.com/new/"><span class="style3">Apple Acura</a></span></li>
<li><a href="http://www.bobbyrahalacura.com/new-inve ... ing"><span class="style3">Bobby Rahal Acura</a></span></li>
<li><a href="http://www.jonesacura.com/default.aspx? ... ura"><span class="style3">Jones Acura</a></span></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></div></span></td>