jquery - Maintaining submenu visible -
i'm trying display submenu when mouse on parent li when move mouse submenu disappears , not making sense me.
i'm using jquery so.
here's code (shortened):
function showsub(id) { $('#' + id).slidedown('fast'); } function hidesub(id) { $('#' + id).slideup('fast'); }
.menu li { display: inline-block; height: 100%; margin: 0; padding: 0; } .menu li { text-decoration: none; color: #9b9a98; font-weight: 700; font-size: 13px; } .menu li span { line-height: 100px; display: block; padding: 0 15px; } .menu li ul { margin: 0; padding: 0; background: rgba(3, 3, 3, 0.85); display: none; position: absolute; } .menu li ul li { margin: 0; padding: 10px 15px; list-style: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="menu"> <li><a href="index.php"><span>home</span></a> </li> <li onmouseover="showsub('atelier')" onmouseout="hidesub('atelier')"> <a href="index.php?p=atelier"><span>atelier</span></a> <ul id="atelier"> <li><a href="index.php?p=quem_somos"><span>quem somos</span></a> </li> </ul> </li> <li> <a href="index.php?p=portfolio"><span>portfolio</span></a> </li> </ul>
i don't understand. since submenu inside li
should keep submenu visible while mouse on it.
is there i'm doing wrong here?
use jquery snippet.
$(document).ready(function() { $(".menu li").hover( function() { $(this).children("#atelier").slidedown(); }, function() { $(this).children("#atelier").slideup(); } ); });
see here: https://jsfiddle.net/t884g25b/
Comments
Post a Comment