CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
user8579791
user8579791

Reputation:

On hover the sub menu is not staying as expected

in my code when i try to hover the main menu then the sub menu should open and i can click the other link of sub menu as well.I have done almost everything but except when i try to hover the sub menu it is not showing.

I hover on menu i can see the sub-menu but when i try to go sub-menu it disappears 

 $(document).ready(function(){

        $(".accounts").mouseenter(function() {
            $(".underdrop").slideDown();
        });
        $(".accounts").mouseleave(function() {
            $(".underdrop").slideUp();
        });

 }); 




.accounts{

display: inline-block;

position: relative;
}
.underdrop{
    width: 150px;
    position: absolute;
    background-color: #fff;
    margin-top: 20px;
    margin-left:250px;
    border: 1px solid #d7d7d7;
    padding-left: 0px;
    height:230px;
    z-index: 999999;
    -webkit-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
            box-shadow: 0px 1px 9px 0px rgba(0,0,0,0.75);
    display:none;

}

.underdrop::before{
    content: '';
    position: absolute;
    border: 15px solid #4b968a;
    border-bottom-color: transparent;
    border-right-color: transparent;
    margin-left: 55px;
    transform: rotate(45deg );
    margin-top: -15.5px;
    z-index: 9999
}

DEMO

Upvotes: 1

Views: 55

Answers (1)

Saurabh Solanki
Saurabh Solanki

Reputation: 2204

update your document.ready function like this. i have checked in jsfiddle

    $(document).ready(function(){

        $(".accounts").mouseenter(function() {
            $(".underdrop").slideDown();
        });
        $(".underdrop").mouseleave(function() {
            $(".underdrop").slideUp();
        });

 });

check updated jsfiddle here

Upvotes: 3

Related Questions