Question

我有一个包含6个元素的导航栏。前两个有一个额外的下拉菜单，应该在鼠标悬停时显示。问题是当鼠标位于下拉菜单的空间上时显示此菜单，而当鼠标位于导航栏元素上时则不会显示此菜单。

（如果不清楚您可以查看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;}

Answer 1

将此添加到您的CSS

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

<强> FIDDLE DEMO >>

希望它会有所帮助。

Answer 2

试试这个：

CSS：

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

导航栏中的css下拉菜单

2 个答案: