CODEWITHSUNDEEP
javascripthtmlcss
RuFFCuT
RuFFCuT

Reputation: 317

Drop down menu, CSS, HTML and JavaScript: JavaScript making menu jump and not function correctly

I have a simple drop down menu, but when used it does not work correctly, I think there is a problem with the JavaScript as it just keeps bouncing up and down!

jsFiddle Here: http://jsfiddle.net/pJeDV/

<div class="container">
<ul id="coolMenu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Mauricii</a></li>
<li>
    <a href="#">Periher</a>
    <ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
</li>
<li><a href="#">Tyrio</a></li>
<li><a href="#">Quicumque</a></li>
</ul>

CSS

#coolMenu,
#coolMenu ul {
    list-style: none;
}
#coolMenu {
    float: left;
}
#coolMenu > li {
    float: left;
}
#coolMenu li a {
display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#coolMenu ul {
    position: absolute;
    display: none;
z-index: 999;
}
#coolMenu ul li a {
    width: 80px;
}
#coolMenu li:hover ul {
    display: block;
}

/* Main menu
------------------------------------------*/
#coolMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
}
#coolMenu > li > a {
    color: #fff;
    font-weight: bold;
}
#coolMenu > li:hover > a {
    background: #f09d28;
    color: #000;
}

/* Submenu
------------------------------------------*/
#coolMenu ul {
    background: #f09d28;
}
#coolMenu ul li a {
    color: #000;
}
#coolMenu ul li:hover a {
    background: #ffc97c;
}

#coolMenu li:hover ul.noJS {
    display: block; 
}

JavaScript

<script type="text/javascript">
$(function(){
    $('#coolMenu').find('> li').hover(function(){
        $(this).find('ul')
        .removeClass('noJS')
        .stop(true, true).slideToggle('fast');
    });
});
</script>

http://jsfiddle.net/pJeDV/

Upvotes: 0

Views: 840

Answers (2)

Th0rndike
Th0rndike

Reputation: 3436

is this what you're looking for? instead of using .find('> li') i used .children('a'). Also inside the .hover() function you're missing the mouseout function.

jsFiddle

here's the code:

$(function(){
$('#coolMenu').children('a').hover(function(){
    $(this).find('ul')
    .removeClass('noJS')
    .slideToggle('fast');
},function(){
   $(this).find('ul')
    .addClass('noJS')
    .slideToggle('fast');
    });
});

Upvotes: 0

SVS
SVS

Reputation: 4275

Here is the working fiddle: http://jsfiddle.net/surendraVsingh/pJeDV/6/

Jquery

$(function(){
    $('#coolMenu > li').hover(function(){
        $(this).find('ul').slideToggle();
    });
});

CSS (remove below given code completely)

#coolMenu li:hover ul {
    display:block; /* Remove This*/
}

Upvotes: 2

Related Questions