Увеличение размера свойства наведения

Question

Я строил этот сайт для своего работодателя, и эта проблема не происходит ни в одном браузере, кроме IE. При наведении курсора на кнопку «Службы» справа отображаются две кнопки. При переходе к двум опциям кнопки исчезают в пределах 5 пикселей от кнопки. Я бы хотел, чтобы обе кнопки не совпали с навигационной панелью, потому что это выглядит странно. Любые идеи о том, как увеличить размер зависания?

HTML:

<div id="menu"> 
<ul> 
    <li> 
     <a href="index.htm"> 
      <img src="comps/PillarHP/ButtonLinks/Home.jpg" border="0" /> 
     </a> 
    </li> 
    <br /> 
    <br /> 
    <br /> 
    <li> 
     <a href="TTUgalleries.html"> 
      <img src="comps/PillarHP/ButtonLinks/TTUgalbutton.jpg" border="0" /> 
     </a> 
    </li> 
    <br /> 
    <br /> 
    <br /> 
    <li> 
     <a href="STATEgalleries.html"> 
      <img src="comps/PillarHP/ButtonLinks/Landgalbutton.jpg" border="0" /> 
     </a> 
    </li> 
    <br /> 
    <br /> 
    <br /> 
    <li> 
     <a nohref=""> 
      <img src="comps/PillarHP/ButtonLinks/Services.jpg" border="0" hspace="50" /> 
     </a> 
       <ul class="sub-menu"> 
        <li> 
         <a href="classes.html" id="demargpadLink"><img src="comps/PillarHP/ButtonLinks/classes.jpg" border="0" /></a> 
        </li> 
        <li> 
         <a href="mats.html"><img src="comps/PillarHP/ButtonLinks/Mats.jpg" border="0" /></a> 
        </li> 
        </ul> 
    </li> 
    <br /> 
    <br /> 
    <br /> 
    <li> 
     <a href="newsletter.html"> 
      <img src="comps/PillarHP/ButtonLinks/Newsletter.jpg" border="0" /> 
     </a> 
       <ul class="sub-menu"> 
        <li></li> 
       </ul> 
    </li> 
    <br /> 
    <br /> 
    <br /> 
    <li> 
     <a href="artiststatement.html"> 
      <img src="comps/PillarHP/ButtonLinks/ArtStatement.jpg" border="0" /> 
     </a> 
    </li> 
    <br /> 
    <br /> 
    <br /> 
    <li> 
     <a href="contact.html"> 
      <img src="comps/PillarHP/ButtonLinks/Contact Us.jpg" border="0" /> 
     </a> 
</li> 
</ul> 

CSS:

#menu { 
    position: absolute; 
    margin-left: 179px; 
    margin-top: 200px; 
    z-index:15; 
    padding-bottom: 0px; 

} 
a { 
    text-decoration: none; 
    color: #838383; 

} 
a:hover { 
    color: black; 

} 
#menu a { 
    display: block; 
    width: 140px; 

} 
#menu ul { 
    list-style-type: none; 
    padding-top: 10px; 

} 
#menu li { 
    float: left; 
    position: relative; 
    margin-left: 1px; 
    margin-right: 1px; 
    text-align: center; 

} 
#menu ul.sub-menu { 
    display: none; 
    position: absolute; 
    top: -14px; 
    left: 139px; 
    padding: 10px; 
    z-index: 90; 

} 
#menu ul.sub-menu li { 
    text-align: left; 

} 
#menu li:hover ul.sub-menu { 
    display: block; 

} 
#menu li:hover ul.sub-menu a { 
    margin-top: 4px; 
    margin-bottom: 0; 
    padding: 0; 

} 

Содержит Div CSS:

#menu { 
    position: absolute; 
    margin-left: 179px; 
    margin-top: 200px; 
    z-index:15; 
    padding-bottom: 0px; 

} 

Answer 1

http://jsfiddle.net/Vqw75/ - Это я, что вы ищите! Любовь Лайонел Ричи

Answer 2

http://jsfiddle.net/Vqw75/1/ - Have могут некоторые дополнительные улучшения для вас :)

Во-первых ломом теги BR и просто установить «Ли» на «дисплей: блок» в CSS, это даст вам желаемый результат.

Ваши теги img не требуют атрибута border, так как это можно установить в css, и я добавил теги alt, которые необходимы для проверки разметки.

Также подменю ul должно иметь достаточное количество прокладок, чтобы элементы, прилегающие друг к другу, еще давали желаемое расстояние от главного меню.