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

спасибо, это работает !! и я выбираю его как принятый ответ beacause, он включает в себя меньше строк кода – leccionesonline

Попробуйте это:

CSS:

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

источник

2013-12-22 14:33:33

спасибо, он работает !! – leccionesonline

css выпадающее меню в навигационной панели

ответ

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