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
    Commented 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. Commented el 15 mar. 2017 a las 2:52
  • Estás modificando la visibilidad del hijo > ul
    – ffflabs
    Commented el 15 mar. 2017 a las 2:55
  • Que devo hacer? Commented el 15 mar. 2017 a las 3:02
  • Añadir, además de todo .menu-wrap .menu il:hover { display: block; }
    – ffflabs
    Commented 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. Commented el 15 mar. 2017 a las 12:05
  • Actualice la pregunta donde me muestra lo que te indico agregue una imagen. Commented el 15 mar. 2017 a las 12:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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