$("nav li").stop(true, false).hover(function(){ $(this).find("ul").stop(true, false).slideDown("slow").css("z-index", 1000); }, function(){ $(this).find("ul").stop(true, false).slideUp("slow").css("z-index", 1); });
<nav> <li> Primero <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li> Segundo <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li> Tercero <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li> Cuarto <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li> Quinto <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> </nav> <nav> <li> Primero <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li> Segundo <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li> Tercero <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li> Cuarto <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li> Quinto <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> </nav>
*{ transition: background .5s, color .5s; } nav{ display: block; width: 100%; height: 5rem; background: steelblue; margin-bottom: 5rem; } nav li{ list-style: none; display: inline-block; cursor: pointer; color: white; height: inherit; width: 5rem; line-height: 5rem; text-align: center; } nav li:hover{ background: lightsteelblue; color: navy; } nav li ul{ display: none; position: absolute; margin-top: 0; height: auto; } nav li ul li{ display: block; margin-left: -2.5rem; background: lightsteelblue; } nav li ul li:hover{ background: lightblue; color: whitesmoke; }