CSS/HTML MENU: подменю исчезает при зависании

-1

У меня возникают проблемы с созданием меню наведения. по ссылке под подменю появляется при наведении курсора на элемент главного меню. Когда я пытаюсь навести курсор на подменю, он исчезает, когда я перемещаю курсор над ним.CSS/HTML MENU: подменю исчезает при зависании

A Fiddle

HTML

<div id='menu'> 
    <ul> 
     <li> 
      <center><a href="#">Services</a> 
      </center> 
      <ul> 
       <li><a href="#">Moving help ~ Deliveries</a> 
       </li> 
       <li><a href="#">Around the property</a> 
       </li> 
       <li> <a href="#"> Cleaning</a> 
       </li> 
       <li> <a href="#"> Minor Home Repairs</a> 
       </li> 
       <li><a href="#"> Personal Care</a> 
       </li> 
       <li><a href="#"> Skiller Handyperson</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <center> <a href='#'>company</a> 
      </center> 
      <ul> 
       <li> <a href="about.php" class="firstli">About us </a> 
       </li> 
       <li> <a href="contact.php">Contact us </a> 
       </li> 
       <li> <a href="faq.php">F.A.Q. </a> 
       </li> 
       <li><a href="term.php">Terms of Use </a> 
       </li> 
       <li><a href="privacy.php" style="border-right:0px;">Privacy Policy </a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 
</div>

CSS

#menu * { 
    padding:0; 
    margin: 0; 
    font: 12px georgia; 
    list-style-type:none; 
} 
#menu { 
    margin-top:300px; 
    background-color:none; 
    float: left; 
    line-height: 10px; 
} 
#menu a { 
    display: block; 
    text-decoration: none; 
} 
#menu a:hover { 
} 
#menu ul li ul li a:hover { 
    padding-left:9px; 
    border-left: solid 1px #000; 
} 
#menu ul { 
    margin-bottom:10px; 
} 
#menu ul li ul li { 
    width: 140px; 
    border: none; 
    color: #eee; 
    padding-top: 3px; 
    padding-bottom:3px; 
    padding-left: 3px; 
    padding-right: 3px; 
    background:black; 
} 
#menu ul li ul li a { 
    font: 11px arial; 
    font-weight:normal; 
    font-variant: small-caps; 
    padding-top:3px; 
    padding-bottom:3px; 
} 
#menu ul li { 
    float: left; 
    width: 146px; 
    font-weight: bold; 
    border-top: solid 1px #283923; 
    border-bottom: solid 1px #283923; 
} 
#menu ul li a { 
    padding-left: 15px padding-right: 10px; 
} 
#menu li { 
    position:relative; 
    float:left; 
} 
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul { 
    display:none; 
    list-style-type:none; 
    width: 140px; 
} 
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
    display:block; 
} 
#menu:hover ul li:hover ul li:hover ul { 
    position: absolute; 
    margin-top: -22px; 
    font: 10px; 
} 
#menu:hover ul li:hover ul { 
    position: absolute; 
    margin-top: 1px; 
    font: 10px; 
    bottom:100%; 
}

источник

2015-04-24 azam khan

Поместите свой код в свой вопрос, пожалуйста. – j08691

Конечно, это происходит из-за 'margin-bottom: 10px' вы добавили в абсолютно позиционируемое подменю' ul' ... вам нужно сделать так, чтобы между пунктом главного меню и подменю не было «пробела», так что курсор мыши может перемещаться от одного к другому без каких-либо «перерывов» между ними, потому что этот перерыв делает пункт главного меню потерянным. – CBroe

@CBroe именно то, что я искал, но не смог найти .. :) Спасибо .. –

Проблема ваш внутренний список имеет нижнюю границу, поэтому она отделена от родительского li элемента:

enter image description here

Если вы хотите сохранить пространство, чем вы можете использовать:

#menu ul { 
    padding-bottom: 20px; 
    margin-bottom: 0; 
}

Fiddle here

Результат не больше разрыва между ними и мы не теряем :hover состояния :

enter image description here

источник

2015-04-24 14:49:00 skobaljic

Спасибо !!!!! :) –

CSS/HTML MENU: подменю исчезает при зависании

ответ

Смежные вопросы