Activar menu desplegable cuando pase el mouse

publicado por: Anonymous

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

solución

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; 
}
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *