我有一個包含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ñanza">Buscador Colegios</a>
<ul>
<li><a href="<%=request.getContextPath()%>/" title="Centros en territorio nacional">España</a></li>
<li><a href="<%=request.getContextPath()%>/buscador-colegios-exterior.jsp" title="Centros Españoles en extranjero">Exterior</a></li>
</ul>
</li>
<li class="buscador-btn">
<a href="#" title="Opinión Personal de usuarios sobre Colegios">Opinión Usuarios</a>
<ul>
<li><a href="<%=request.getContextPath()%>/Colegio/ranking-colegios.jsp" title="Ranking de Colegios por opinió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ón de Colegios">Criterios de Selección</a></li>
<li class="admision-btn"><a href="<%=request.getContextPath()%>/Colegio/criterios-admision-comunidad.jsp" title="Criterios de Admisión por Comunidades">Admisió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;}
你可以做一個[的jsfiddle(http://jsfiddle.net)? – Vucko