드롭 다운 메뉴 숨기기 및 표시

"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"는에 커서를 넣을 때 하위 메뉴가 나타납니다. 하지만 링크를 클릭하려고하면 하위 메뉴가 사라집니다. (아마도 "aulas"가 더 이상 마우스 오버되지 않기 때문일 것입니다.) 감사합니다. –

아래의 규칙에서 상단을 26px로 조정하십시오.

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

이제 작동합니다. 정말 고맙습니다!! –

드롭 다운 메뉴 숨기기 및 표시

답변

관련 문제