CSS multilevel drop-down with additional jQuery

Question

I have a css multilevel drop-down menu which works perfectly.

I would like to add some additional jQuery code so that the menu stays open when you hover. You would then have to click the screen to close the menu, (Similar to http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html or http://www.codenothing.com/archives/2009/multi-level-drop-down-menu/ ).

I have added some jQuery, (see below), which makes the first two levels/uls work as required, but the lower levels are not staying open. Any ideas on how to fix this please?

Jsfiddle here - http://jsfiddle.net/PSFk7/5/

jQuery code:

$('.top_level').mouseover(function(){
    $('.megamenu_main').addClass('megamenu_main_over');
    $('html').click(function() {        
         $('.megamenu li.top_level ul').removeClass('megamenu_main_over');
    });
});  

$('li.parent').mouseover(function(){
    $('li.parent ul').removeClass('children_over')
    $(this).children('ul').addClass('children_over');
    $('html').click(function() {        
         $('ul').removeClass('children_over');
    });
});

HTML code:

      <div class="megamenu_container">
            <ul class="megamenu megamenu_slide">       
                <li class="top_level"><span><a href="#">Main Page</a></span>        
                    <ul class="megamenu_main">
                        <li><a href="#">Suspendisse</a></li>
                        <li><a href="#">Fusce porta</a></li>
                        <li class="parent"><a href="http://www.mysite.co.uk/mainpage/page-01">Page Level 01</a>
                            <ul class='children'>
                                <li><a href="#">Donec et enim</a></li>
                                <li><a href="#">Aliquam volutpat</a></li>
                                <li class="parent"><a href="#">Page Level 02</a>
                                    <ul class='children'>
                                        <li class="parent"><a href="#">Page Level 03</a>
                                            <ul class='children'>
                                                <li><a href="#">Page Level 04</a></li>
                                                <li><a href="#">Proin sed nisi a sapien</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Curabitur ultricies</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Nunc sit amet</a></li>
                                <li class="parent"><a href="#">In aliquam orci</a>
                                    <ul class='children'>
                                        <li class="parent"><a href="#">Page Level 03 V2</a>
                                            <ul class='children'>
                                                <li><a href="#">Page Level 04 V2</a></li>
                                                <li><a href="#">Proin sed nisi a sapien V2</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Curabitur ultricies</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Integer dignissim</a></li>
                                <li><a href="#">Praesent euismod tortor</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Vestibulum quis velit</a></li>
                        <li><a href="#">Aliquam lacinia</a></li>
                        <li class="parent"><a href="#">Ut porttitor ipsum</a>
                                    <ul class='children'>
                                        <li class="parent"><a href="#">Page Level 01 V1</a>
                                            <ul class='children'>
                                                <li><a href="#">Page Level 02 V1</a></li>
                                                <li><a href="#">Proin sed nisi a sapien V1</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Curabitur ultricies</a></li>
                                    </ul>
                        </li>
                        <li><a href="#">Mauris sit amet</a></li>
                        <li><a href="#">Praesent</a></li>
                        <li><a href="#">Nullam ornare</a></li>                                
                    </ul>
                </li>
            </ul>
        </div>

CSS code:

.megamenu_container { height:55px; line-height:55px; margin:0; position:relative; float:left; z-index:9; background:#d55c4b; margin:0 17px 0 0; padding:0 39px; text-align:left; }
.megamenu_container a { text-decoration: none; }
.megamenu_main { list-style:none; padding:0; margin:0; }
.megamenu li.top_level { list-style:none; background:none; }
.megamenu .top_level > span { color:#FFF; line-height:55px; outline:0; text-decoration:none; }
.megamenu .top_level > span a { color:#FFF; }
.megamenu_main, .megamenu_main ul { position:absolute; top:-9999em; left:-9999em; width:167px; margin:0 0 40px -1px; padding:0; -webkit-box-shadow: 0 2px 5px #bbb; -moz-box-shadow: 0 2px 5px #bbb;  -o-box-shadow: 0 2px 5px #bbb; box-shadow: 0 2px 5px #bbb; border:none; border-top:5px solid #d04734; background:#FFF; display:none; }
.megamenu > li:hover .megamenu_main { top:55px; left:1px; display:block; }      
.megamenu > li .megamenu_main_over { top:55px; left:1px; display: block; }      
.megamenu_main li:hover > ul { top:-5px; left:100%; display:block; }        
.megamenu_main ul.children_over, .megamenu_main li.addmenu ul.children { top:-5px; left:100%; display:block; }      
.megamenu_main li:hover > .left_dropdown { left:-100%; }
.megamenu_slide { top:30px; -webkit-transition: top 0.3s 0.2s, opacity 0 0.2s; -moz-transition: top 0.3s 0.2s, opacity 0 0.2s;  -o-transition: top 0.3s 0.2s, opacity 0 0.2s; -ms-transition: top 0.3s 0.2s, opacity 0 0.2s; transition: top 0.3s 0.2s, opacity 0 0.2s; }
.megamenu_slide ul { left:80%; -webkit-transition: left 0.2s 0.2s, opacity 0 0.2s; -moz-transition: left 0.2s 0.2s, opacity 0 0.2s; -o-transition: left 0.2s 0.2s, opacity 0 0.2s; -ms-transition: left 0.2s 0.2s, opacity 0 0.2s; transition: left 0.2s 0.2s, opacity 0 0.2s; }
.megamenu_slide li > .left_dropdown { left:-80%; }
.parent, .megamenu_main .dropdown_arrow { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); background-repeat: no-repeat; background-position: 96% 48%; }
.parent:hover, .megamenu_main .dropdown_arrow:hover { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); }
.megamenu_main li a { text-decoration: none; color:#4d4d4d; font-size:12px; }
.megamenu_main li { border-bottom:1px solid #e5e5e5; line-height:0.8em; margin:0; padding:9px 27px 9px 13px; }
.megamenu_main li a:hover { color:#d04734; }
.megamenu_main > li a { font-weight:bold; }
.megamenu_main > li ul { list-style: none; padding:0; margin:0; min-height:408px; }
.megamenu_main > li ul li a { font-weight:normal; }
.main_opened li, .megamenu_main > li ul li { position:static; -webkit-transition: background-color 0.3S; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -ms-transition: background-color 0.3s; transition: background-color 0.3s; }

Stuart Burrows · Accepted Answer · 2013-04-09 09:01:32Z

5

You are currently removing all children_over classes on mouseover ($('li.parent ul').removeClass('children_over')) which is breaking your script. Instead only remove those classes from sibling trees (i.e. not the curernt items parents)

You can do this using this line instead:

$(this).siblings().find('ul').removeClass('children_over');

Here is a modified fiddle: http://jsfiddle.net/PSFk7/8/

Hope it helps :)

answered Apr 9, 2013 at 9:01

Stuart Burrows

10.8k2 gold badges36 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS multilevel drop-down with additional jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related