導航欄中的css下拉菜單

我有一個包含6個元素的導航欄。前兩個有一個額外的下拉菜單，應該顯示在鼠標上。問題在於，當鼠標懸停在下拉菜單的空白處而不是鼠標懸停在導航欄元素上時，會顯示此菜單。導航欄中的css下拉菜單

（如果不清楚，您可以查看www.buscocolegio.com並從下到上將鼠標指向導航欄的前兩個元素，您將看到下拉菜單在到達導航之前顯示巴元）

這裏的JSP和CSS我已經實現：

<div id="main-nav"> 
<ul id="navbar" class="main-nav-btn"> 
<li class="buscador-btn"> 
    <a href="#" title="Buscador Colegios, Institutos, Centros de Ense&ntilde;anza">Buscador Colegios</a> 
    <ul> 
     <li><a href="<%=request.getContextPath()%>/" title="Centros en territorio nacional">Espa&ntilde;a</a></li> 
     <li><a href="<%=request.getContextPath()%>/buscador-colegios-exterior.jsp" title="Centros Espa&ntilde;oles en extranjero">Exterior</a></li> 
    </ul> 
</li> 
<li class="buscador-btn"> 
    <a href="#" title="Opini&oacute;n Personal de usuarios sobre Colegios">Opini&oacute;n Usuarios</a> 
    <ul> 
     <li><a href="<%=request.getContextPath()%>/Colegio/ranking-colegios.jsp" title="Ranking de Colegios por opini&oacute;n personal de usuarios">Ranking</a></li> 
     <li><a href="<%=request.getContextPath()%>/Colegio/opiniones-comentarios-colegios.jsp" title="Comentarios, opiniones de usuarios sobre Colegios">Comentarios</a></li> 
    </ul> 
</li> 
<li class="criterios-btn"><a href="<%=request.getContextPath()%>/criterios-seleccion.html" title="Criterios de Selecci&oacute;n de Colegios">Criterios de Selecci&oacute;n</a></li> 
<li class="admision-btn"><a href="<%=request.getContextPath()%>/Colegio/criterios-admision-comunidad.jsp" title="Criterios de Admisi&oacute;n por Comunidades">Admisi&oacute;n por Comunidades</a></li> 
<li class="ayuda-btn"><a href="<%=request.getContextPath()%>/Colegio/ayuda-buscar-colegio.action" title="Ayuda buscar colegios">Foro</a></li> 
<li class="contacto-btn"><a href="<%=request.getContextPath()%>/contacto.html" title="Contacto">Contacto</a></li> 
</ul> 
</div><!--MAIN NAV ENDS-->

和CSS

@CHARSET "UTF-8"; 
#main-nav {height: 51px;width: 100%;background-color: #204865;} 
.main-nav-btn { padding: 0; width: 775px;margin: 0 auto;} 
.main-nav-btn li {float: left;text-align: center;line-height: 51px;margin-right: 1px;list-style-type: none;} 
.main-nav-btn li a {color: #FFF;text-align: center;text-decoration: none;height: 51px;display: block;vertical-align: 30px;} 
.main-nav-btn li:hover{background-position: center -51px;background-repeat: no-repeat;} 
li.buscador-btn {height: 51px;width: 140px;background-image: url(../img/botones/buscador_colegios.png);background-repeat: no-repeat;} 
li.buscador-exterior-btn {background-image: url(../img/botones/buscador_colegios_exterior.png);background-repeat: no-repeat;height: 51px;width: 185px;} 
li.criterios-btn {background-image: url(../img/botones/criterios_btn.png);background-repeat: no-repeat;height: 51px;width: 145px;} 
li.admision-btn {background-image: url(../img/botones/buscador_colegios_exterior.png);background-repeat: no-repeat;height: 51px;width: 185px;} 
li.ayuda-btn, li.contacto-btn {background-image: url(../img/botones/ayuda_btn.png);background-repeat: no-repeat;height: 51px;width: 76px;} 
#navbar li:hover ul, #navbar li.hover ul {display: block;position: absolute;margin: 0;padding: 0;} 
#navbar li:hover li, #navbar li.hover li {float: none;} 
#navbar li:hover li a, #navbar li.hover li a {background-color: #B2DFEE;border-bottom: 1px solid #fff;color: #000;width: 140px;height: 35px;text-align: left;padding-left: 5px;line-height: 35px;position: relative;z-index: 1;} 
#navbar li:hover li a:hover, #navbar li.hover li a:hover {background-color: #009ACD;border-bottom: 1px solid #fff;color: #fff;}

來源

2013-12-22 leccionesonline

你可以做一個[的jsfiddle（http://jsfiddle.net）？ – Vucko

添加到您的CSS

.main-nav-btn li ul { 
    display:none; 
}

FIDDLE DEMO >>

希望這將有助於。

來源

2013-12-22 14:33:10

謝謝你，它的作品!!我選擇它作爲接受的答案，因爲它涉及更少的代碼行 – leccionesonline

試試這個：

CSS：

li.buscador-btn > ul{ 
    display:none; 
} 
li.buscador-btn:hover > ul{ 
    display:block; 
}

來源

2013-12-22 14:33:33

謝謝，它的作品！ – leccionesonline

導航欄中的css下拉菜單

回答

相關問題