CODEWITHSUNDEEP
javascripthtmlcss
VonHornmeister
VonHornmeister

Reputation: 83

Submenu disappears as soon as I reach it with a mouse

I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it. Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.

And it doesnot work in fiddle because of the styling, thats why I didnt put it there.

HTML

<ul id="menüü">
    <li class="menu">
        <p><a href="meist.html">Meist</a>

        </p>
        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li class="menu">
        <p><a href="seadmed.html">Seadmed</a>

        </p>
        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>
<div id="submenu"></div>

CSS

.menu {
    display: inline;
    float:left;
    width:180px;
    height:50px;
    color:#191919;
    text-align:center;
    background:#990000;
    -moz-border-radius-top-left: 50px;
    border-top-left-radius: 50px;
    position:relative;
}
.submenu {
    font-size:14px;
    display:none;
    position:absolute;
    top:62px;
    right:25%;
    z-index:300
}
.submenu {
    background-color:#cecece;
}
.submenu > li {
    list-style-type:none;
    background-color:#fff;
    color:blue;
    cursor:pointer;
}
#submenu {
    color:white;
    height:40px;
    width:900px;
    background:#630000;
    margin-top:50px;
    position:relative;
}

JS

$(document).ready(function () {
    $("li.menu").mouseenter(function () {
        $(this).find(".submenu").toggle();
    });
});

Upvotes: 0

Views: 177

Answers (4)

BrunoLM
BrunoLM

Reputation: 100331

Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.

Example on jsFiddle

$(document).ready(function () 
{
    $(".menu").mouseover(function () 
    {
        $(this).find(".submenu").show();
    });

    $(".menu").mouseout(function () 
    {
        $(this).find(".submenu").hide();
    });
});

Upvotes: 2

Roy Sonasish
Roy Sonasish

Reputation: 4599

I have update the jquery and added style for .menu a, also <p> in not required in side the li.

jQuery

$('.menu').hover(
function () {
    $(this).children('.submenu').fadeIn('fast');
},
function () {
    $(this).children('.submenu').fadeOut();
});

css

.menu a{
    display:block;
    line-height:50px;
}
.submenu {
    font-size:14px;
    display:none;
    position:absolute;
    top:50px;
    right:25%;
    z-index:300
}

html

 <ul id="menüü">
    <li class="menu">
        <a href="meist.html">Meist</a>
        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li class="menu">
        <a href="seadmed.html">Seadmed</a>
        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>

jsFiddle File

Upvotes: 1

seemly
seemly

Reputation: 1090

Not a perfect example by any means, but this pure css version should provide a good base to get you started?

http://jsfiddle.net/bNpnZ/2/

<ul class="menu">
    <li> <a href="meist.html">Meist</a>

        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li> <a href="seadmed.html">Seadmed</a>

        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>

ul {
    margin:0;
    list-style:none;
}

.menu {
    width:100%;
    float:left;
    background:#eee;
}
.menu > li {
    float:left;
    margin:0 0 0 10px;
    position:relative;
}
.menu > li:first-child {
    margin:0;
}
.menu > li > a {
    padding:10px 20px;
    float:left;
    color:#666;
}
.submenu {
    position:absolute;
    top:-9999em;
    left:0;
    font-size:14px;
    background-color:#ccc;
}
.menu > li:hover .submenu {
    top:30px;
}

Upvotes: 1

kushyar
kushyar

Reputation: 1191

Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.

Upvotes: 1

Related Questions