How to display a sub menu in hover

Question

I have a menu with sub menu(vertical). My first li is active with the sub menu. My problem is when I hover in the other li I have the sub menu added in my last one.

What I need is:

• when I hover in my menu, to get only the sub menu of my current li
• when my cursor is not hovering in my menu, to get the default sub menu that has the on class

this is the link of jsFiddle

http://jsfiddle.net/bymb6kvm/2/

this my code :

<nav>
                <div id="menuu">
                    <ul class="niveau1">
                        <li><a id="lrf"  class="sousmenu" href="#">Test 1</a>
                            <ul id="lrfH" class="niveau2 on">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>

                            </ul>
                        </li>
                       <li><a id="cm" class="sousmenu" href="#">Test 2</a>
                            <ul id="cmH" class="niveau2">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>
                            </ul>
                        </li>
                        <li><a id="dj" class="sousmenu" href="#">Test 3</a>
                            <ul id="djH" class="niveau2">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>  

CSS Code

#menuu ul{

 margin:0;
 padding:0;
 padding-left:97px;
 line-height:30px;
    }
#menuu li{
    float: left;
    list-style: outside none none;

        }
.sousmenu{

 color: #000 !important;
 text-decoration:none;
 width:150px;
 height:30px;
 display:block;
 text-align:center;
  border:1px solid #000;
}
.niveau2{
    margin-left: -50px !important;
}
.niveau2 a{
    padding-left:20px !important;
    text-decoration:none;
    color:red ;
}
.sousmenu:hover{
    color: #fff !important;
    background-color: #ddd;
    border-bottom-color: #000 !important;
}
#menuu ul ul{
     position:absolute;
     visibility:hidden;
     padding-left:0px;
          }

#menuu ul ul li:hover a{
  color:#000;
}
#menuu ul ul ul{
 left:152px;
 top:-0.5px;
 display:none;
         }

 #menuu ul li:hover ul{
  visibility:visible;   
        }
.niveau2.on{
    visibility:visible !important;
}

JS Code

$(document).ready(function(e){
                    $('.sousmenu').hover(function(e){
                        e.preventDefault();
                        var getID=$(this).attr('id');
                        $("#"+getID+"H").css("visibility","visible");
                        $(".on").css("visibility","hidden");
                    });

                });

Answer 1

Try this:

 $(document).ready(function(e) { $('.sousmenu').hover(function(e) { e.preventDefault(); var getID = $(this).attr('id'); $(".niveau2").hide(); $("#" + getID + "H").show(); }); });

 #menuu ul { margin: 0; padding: 0; padding-left: 97px; line-height: 30px; } #menuu li { float: left; list-style: outside none none; } .sousmenu { color: #000 !important; text-decoration: none; width: 150px; height: 30px; display: block; text-align: center; border: 1px solid #000; } .niveau2 { margin-left: -50px !important; } .niveau2 a { padding-left: 20px !important; text-decoration: none; color: red; } .sousmenu:hover { color: #fff !important; background-color: #ddd; border-bottom-color: #000 !important; } #menuu ul ul { position: absolute; visibility: hidden; padding-left: 0px; } #menuu ul ul li:hover a { color: #000; } #menuu ul ul ul { left: 152px; top: -0.5px; display: none; } #menuu ul li:hover ul { visibility: visible; } .niveau2.on { visibility: visible !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <nav> <div id="menuu"> <ul class="niveau1"> <li><a id="lrf" class="sousmenu" href="#">Test 1</a> <ul id="lrfH" class="niveau2 on"> <li><a href="#">ss test 1</a></li> <li><a href="#">ss test 2</a></li> </ul> </li> <li><a id="cm" class="sousmenu" href="#">Test 2</a> <ul id="cmH" class="niveau2"> <li><a href="#">ss test 1</a></li> <li><a href="#">ss test 2</a></li> </ul> </li> <li><a id="dj" class="sousmenu" href="#">Test 3</a> <ul id="djH" class="niveau2"> <li><a href="#">ss test 1</a></li> <li><a href="#">ss test 2</a></li> </ul> </li> </ul> </div> </nav>

View on jsFiddle