Question

Here’s a link for my issue.
Please help me to fix the sliding menu stay steady until one can select the sub-menu links in the menu.

I have tried code below

html

<div id="menu">
<ul id="tabs">
<li id="tabsli"><a href="#">Home</a></li>
<li id="tabsli"><a href="#tab1">Tab1</a></li>

<div id="tab1" class="subtabs">
    <ul>
    <li id="tabsli1"><a href="slideshow.html">slideshow</a></li>
    <li id="tabsli1"><a href="#">Tab1-2</a></li>
    <li id="tabsli1"><a href="#">Tab1-3</a></li>
    </ul>
</div>

<li id="tabsli"><a href="#tab2">Tab2</a></li>

<div id="tab2" class="subtabs">
    <ul>
    <li id="tabsli1"><a href="RegForm.html">Register</a></li>
    <li id="tabsli1"><a href="Pagination.html">Simple Pagination</a></li>
    <li id="tabsli1"><a href="#">Tab2-3</a></li>
    </ul>
</div>
<li id="tabsli"><a href="#"> Contact Us</a></li>
</ul>


</div>

jquery

$(document).ready(function(){
  menu();
    function menu(){
        $('.subtabs').hide();
    $("#tabs a").hover(function(){
      $(this.hash).slideToggle("slow");
    });
 };
});

JsFiddle

Answer 1

You can not add <div> tags in the middle of a <ul> tag. That is bad html syntax there. What you want to do is add the <div> which is the submenu in to the <li> which is being used to open the submenu. The hover method should be used on the <li> tag instead to hide and show the <div>.