Скрыть и показать выпадающее меню

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style> 

ul { 
background-color: black; 
color: white; 
text-align: center; 
padding: 6px; 
width: 960px; 
} 
ul li { 
display: inline; 
font-family: thinn; 
font-size: 25px; 
margin: 20px; 
position: relative; 
left: -2px;} 

ul li:hover { 
    background: black; 
    color: white; 
} 
ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 

} 
ul li ul li { 
    background: grey; 
    display: block; 
} 
ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
    position: absolute; 
    left: -30px; 
    width: 120px; 
} 
li.submenu{ 
font-size: 12pt; 
width: 100px; 
position: relative; 
left: -10px; 
background-color: black; 
top: -10px; 
} 
a{ 
color: blue; 
} 
</style> 
</head> 
<body> 
<ul><li>Home</li> 
    <li>Sobre</li> 
    <li> 
    Aulas 
    <ul> 
     <li class="submenu"><a href="">Quimica organica</a></li> 
     <li class="submenu"><a href="">Oxigenada</a></li> 
    </ul> 
    </li> 
    <li>Videos</li> 
    <li>Downloads</li> 
    <li>Contato</li> 
</ul> 
</body>`

источник

2014-09-27 Marcos Vinicius

Он работает (на светлячок) или я не понимаю вашу проблему;) – damian004

Это отлично работает, посмотрите это http://jsfiddle.net/1fjqrdLx/ –

Когда я поместить курсор на «Aulas» появится подменю. Но когда я пытаюсь щелкнуть ссылку, подменю исчезнет. (вероятно, потому, что «алулы» больше не парят), спасибо. –

В приведенном ниже правиле отрегулируйте верхнюю границу до 26 пикселей.

ul li ul { 
padding: 0; 
position: absolute; 
top: 26px; 
left: 0; 
width: 150px; 
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none; 
display: none; 
opacity: 0; 
visibility: hidden; 
}

источник

2014-09-27 14:15:10 Maigret

Теперь он работает. Огромное спасибо!! –

Скрыть и показать выпадающее меню

ответ

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