css dropdown menu issue in ie - css

Question

I have a dropdown menu on the top of a page like so:
CSS:
div#navwrapper {
position: relative;
clear: both;
width: 100%;
height: 35px;
line-height: 35px;
letter-spacing: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
div#coachnavigation {
width: 990px;
margin: 0 auto;
font-weight: bold;
}
#coachnavigation .firstli {
background-image: url('../coach/images/logo_tsa.png');
background-repeat: no-repeat;
text-align: right !important;
padding-left: 35px;
}
#coachnavigation .down {
background-image: url('../images/button_down.png');
background-repeat: no-repeat;
background-position: 95% 50%;
padding-right: 26px;
}
div#searchbar {
clear: both;
float: left;
width: 975px;
height: 28px;
line-height: 28px;
background-color: #164a98;
padding-left: 15px;
color: #fff;
}
#searchbar a {
color: #fff;
}
#box
{
line-height: 32px;
}
#box .field
{
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0%, #FEFFFE),
color-stop(100%, #BDBDBD)
);
height: 20px;
margin: 0px;
-webkit-border-radius: 25px;
}
#box .field input[type=text]
{
padding: 2px 2px 2px 25px;
border: 0;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
margin: 0;
outline: 0;
width: 144px;
height: 20px;
float: left;
background: url('images/magnifier.png') 7px 5px no-repeat;
border: 1px solid #333333;
color: #333333;
}
#box .field input[type=submit]
{
float: left;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(100%, #C6C6C6),
color-stop(0%, #8F8F8F)
);
border: 1px solid #606060;
width: 60px;
height: 26px;
padding: 2px 0 2px 0;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
margin: 0 0 0 -1px;
opacity: 0.9;
cursor: pointer;
text-shadow: 1px 1px 0 #DBDBDB;
}
.coachnavmenu>li>ul>li>ul>li { width: 400px; }
.coachnavmenu,
.coachnavmenu ul,
.coachnavmenu li
{
padding: 0px;
margin: 0px;
z-index: 2;
text-align: right;
}
.coachnavmenu > li
{
float: left;
}
.coachnavmenu li
{
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 30px;
letter-spacing: 0px;
color: #333333;
border-right: 1px inset #f6f6f6;
padding: 5px 12px 0px 12px;
}
.coachnavmenu > li li
{
list-style-type: none;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #f6f6f6;
color: #333333;
background-color: #f6f6f6;
padding: 0 20px 0 4px;
}
.coachnavmenu ul
{
display: none;
position: absolute;
margin-left: -15px;
margin-top: -1px;
}
.coachnavmenu li:hover > ul
{
display: block;
}
.coachnavmenu ul.parent_hover
{
display: block;
}
.coachnavmenu a
{
color: #333333;
line-height: 100%;
width: 100%;
text-decoration: none;
}
.coachnavmenu li.greenhover:hover
{
color: #333333;
background-color: #7dc242;
}
.coachnavmenu li.hover,
.coachnavmenu a:hover
{
color: #333333;
background-color: #7dc242;
text-decoration: underline;
}
.coachnavmenu ul ul
{
margin-top: -30px;
left: 99%;
}
.coachnavmenu span
{
display: block;
}
.coachnavmenu
{
float: left;
width: 100%;
color: #000;
}
.endmenu
{
clear: left;
}
Live html can be found here, but I think the problem is the CSS.
http://www.buffalolacrosse.com/test.cfm
I am having issues getting this menu to display correctly. It works in chrome or firefox, just not in IE. The menus are collapsed (the li padding doesnt work) and the alignment is all out of whack on vertical alignment. Your help is appreciated.

Answer 1

I think you need to specify the line height of the a elements in your menu.
I tried by setting the
#coachnavigation a
{
line-height:30px;
}
and it appears fine to me.
also add z-index to your menu, so the dropdown wont appear behind some elements.
div#navwrapper {
z-index:999;
}