CSS вопрос выпадающее меню в т

Question

У меня есть выпадающее меню в верхней части страницы, как так:

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; 
} 

Живой HTML можно найти здесь, но я думаю, что проблема является CSS. http://www.buffalolacrosse.com/test.cfm

У меня возникли проблемы с отображением этого меню. Он работает в chrome или firefox, только не в IE. Меню рухнуло (заполнение li не работает), и выравнивание не в порядке с вертикальным выравниванием. Ваша помощь приветствуется.

Answer 1

Я думаю, вам нужно указать высоту линии элементов a в вашем меню. Я попытался, установив

#coachnavigation a 
{ 
line-height:30px; 
} 

и, кажется, хорошо для меня. также добавьте z-index в ваше меню, поэтому выпадающее меню не появится за некоторыми элементами.

div#navwrapper { 
    z-index:999; 
}