1

Estoy trabajando en una aplicación ASP.NET MVC, en la cual tengo un menu el cual unos de sus items tiene un sub menu el cual lo oculto aplicando css

HTML

<div class="container" style="width:100%; height:100%;">
    <div class="menu-wrap">
        <nav class="menu">
            <div class="icon-list" text-decoration-style:none;>
                <a href="#"><i class="fa fa-fw fa-star-o"></i><span>Mantenimiento</span></a>
                <ul>
                    <li><a href="/Cliente/index">Cliente</a></li>
                    <li><a href="#">Jackets</a></li>
                    <li><a href="#">Chinos &amp; Trousers</a></li>
                    <li><a href="#">Jeans</a></li>
                    <li><a href="#">T-Shirts</a></li>
                    <li><a href="#">Underwear</a></li>
                </ul>

                <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Alerts</span></a>

                <a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a>

                <a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Comments</span></a>

                <a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a>

                <a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span></a>
            </div>
        </nav>
        <button class="close-button" id="close-button">Close Menu</button>
    </div>
    <button class="menu-button" id="open-button">Open Menu</button>
    <div class="content-wrap">
        <div class="content">
            <header class="codrops-header">
                <div class="codrops-links">
                    <a  href="http://tympanus.net/Development/TabStylesInspiration/"><span></span></a>
                    <a  href="http://tympanus.net/codrops/?p=20100"><span></span></a>
                </div>
            </header>

        </div>
    </div><!-- /content-wrap -->
</div><!-- /container -->

CSS

<style>
    .menu ul li {
            display:none;
            position:absolute;
            min-width:140px;
        }
    .menu-wrap .menu ul li:hover > ul {
            display:block;
        }
</style>

Con .menu ul li oculto el submenu mi problema es que no puedo activarlo cuando paso el mouse por encima del item.

Como se muestra el submenu sub menu

7
  • Creo que hay que modificar .menu ul li:hover para remover el display none, antes que sus hijos ul puedan verse.
    – ffflabs
    el 15 mar. 2017 a las 2:48
  • @amenadiel Ya lo he intetado de esta manera .menu ul li:hover > ul { display:block; } pero no funciona. el 15 mar. 2017 a las 2:52
  • Estás modificando la visibilidad del hijo > ul
    – ffflabs
    el 15 mar. 2017 a las 2:55
  • Que devo hacer? el 15 mar. 2017 a las 3:02
  • Añadir, además de todo .menu-wrap .menu il:hover { display: block; }
    – ffflabs
    el 15 mar. 2017 a las 3:03

2 respuestas 2

1

Primero, te recomiendo la siguiente estructura. Es mucho más semántica.

<nav class="menu">
  <div class="icon-list" text-decoration-style:none;>
    <ul class="main-list">
      <li>
        <a href="#"><i class="fa fa-fw fa-star-o"></i><span>Mantenimiento</span></a>
        <ul>
          <li><a href="/Cliente/index">Cliente</a></li>
          <li><a href="#">Jackets</a></li>
          <li><a href="#">Chinos &amp; Trousers</a></li>
          <li><a href="#">Jeans</a></li>
          <li><a href="#">T-Shirts</a></li>
          <li><a href="#">Underwear</a></li>
        </ul>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Alerts</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Comments</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a>
      </li>
      <li>
        <a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span></a>
      </li>
    </ul>
  </div>
</nav>

Segundo, hay que eliminar los position: absolute tanto de las ul como de los li. Además, como ahora a y ul son hermanos, el :hover debe aplicarse al padre, es decir, a los li, ya que, si lo dejamos en a:hover + ul, al sacar el puntero del a se esconderá el submenú.

.menu li:hover > ul { 
  display: block; 
} 

.menu a + ul { 
  display: none; 
} 

.menu li:hover > a { 
  text-decoration:none; 
  background-color:#434343;
} 

.menu a + ul > li 
  display: block; 
  min-width:140px; 
}
0

Ten en cuenta que no puedes hacer :hover sobre un elemento que esta oculto, en tu caso estas apuntando el :hover sobre el li que has iniciado como oculto

<style> 
    .menu a:hover + ul {
            background-color:red;
            display: block;
        }

    .menu ul{
            display:none;
            position:absolute;
            min-width:140px;
        }   
</style>

Yo ocultaría el ul y apuntaria el :hover sobre el <a> que esta visible siempre y sobre todo porque es un elemento hermano y se encuentra antes que el elemento que quieres modificar, regla imprescindible.

EDITO:

En caso de que no quieras que la lista se sobreponga a lo que hay debajo, quita el position:absolute;, quedando finalmente asi:

<style> 
    .menu a:hover + ul {
            display: block;
        }

    .menu ul{
            display:none;
            min-width:140px;
        }   
</style>
2
  • si funciona pero deseo se desplega por encima del resto de los padres, debería desplegar sin sobreponerse a los padres mas bien extendiendo el menu. el 15 mar. 2017 a las 12:05
  • Actualice la pregunta donde me muestra lo que te indico agregue una imagen. el 15 mar. 2017 a las 12:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.