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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -