Rectangle 27 1

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(function(){

   $("#ti1").click(function(){
        $(".ul1").slideToggle(300);
        $(".ul2").hide();
        $(".ul3").hide();
        $(".ul4").hide();
   });

    $("#ti2").click(function(){
        $(".ul2").slideToggle(300);
        $(".ul1").hide();
        $(".ul3").hide();
        $(".ul4").hide();
   }); 
   $("#ti3").click(function(){
        $(".ul3").slideToggle(300);
        $(".ul1").hide();
        $(".ul2").hide();
        $(".ul4").hide();
   }); 
   $("#ti4").click(function(){
        $(".ul4").slideToggle(300);
        $(".ul1").hide();
        $(".ul3").hide();
        $(".ul2").hide();
   }); 

});


</script>
<style type="text/css">

.lidesign{
border:1px solid black;
width:10%;
background-color:#F5F5F5;
border:1px solid #EEEEE0;
}
.ul1{

    display:none;
    border:1px solid #EEEEE0;
    width:20%;
    margin-top:0px;
}
.ul2{

     display:none;
    border:1px solid #EEEEE0;
    width:20%;
    margin-top:0px;

}
.ul3{

    display:none;
    border:1px solid #EEEEE0;
    width:20%;
    margin-top:0px;



}
.ul4{

    display:none;
    border:1px solid #EEEEE0;
    width:20%;
    margin-top:0px;


}
#ti1{

width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
}
#ti2{

width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
position: relative;
}
#ti3{

width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
}
#ti4{

width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
}

</style>
</head>
<body>
<div id="menu">

    <div class="lidesign" id="ti1">Title1</div> 
        <div class="ul1">
        <ul>
            <li> 123</li>
            <li> 456</li>
            <li> 789</li>
            <li> 789</li>
            <li> 789</li>
            <li> 789</li>
            <li> 789</li>
        </ul>
        </div>
    <div class="lidesign" id="ti2">Title2</div> 
        <div class="ul2">
        <ul>
            <li> abc</li>
            <li> def</li>
            <li> ghi</li>
            <li> abc</li>
            <li> def</li>
            <li> ghi</li>
        </ul>
        </div>

    <div class="lidesign" id="ti3">Title3</div>
        <div class="ul3">
            <ul>
            <li> 123</li>
            <li> 456</li>
            <li> 789</li>
            <li> 123</li>
            <li> 456</li>
            <li> 789</li>
        </ul>
        </div>

    <div class="lidesign" id="ti4">Title4</div>
        <div class="ul4">
            <ul>
            <li> abc</li>
            <li> def</li>
            <li> ghi</li>
        </ul>
        </div>

</div>
</body>
</html>

jquery - Copy html table row and append in other table - Stack Overflo...

jquery checkbox html-table
Rectangle 27 0

try the below jquery code

$(function(){
                $('.menu-header ul li a').click(function(){
                     $(this).siblings().slideToggle(100);
               });  
              });

javascript - slidetoggle vertical menu: Children not working - Stack O...

javascript jquery
Rectangle 27 0

If you can find a way to position .dropdownContactUs and .dropdownDashboard without using floats, they'll stop moving up and down with the dropdownHome. The reason they're scrolling up now is because with them being floated and them being relatively position to their container (body), the container only goes down far enough to contain .dropdownHome which means when it moves up, they have to move up too. Remember, when using floats, it takes the elements out of the flow of the document which means they don't effect the size of any elements on the page. In turn, they can be effected by where everything else is positioned.

Thank you. It worked, but now whenever I click dashboard or contact us they scroll from top to bottom but I want the to scroll from bottom to top. If you have any advice that would be great. Thank you.

javascript - Jquery .slideToggle navigation menu. All menus slide and ...

javascript jquery html click slidetoggle
Rectangle 27 0

If you need to toggle a sibling <p> element, just use the following:

$(".menu-header ul li a").click(function(e) {
    $(this).siblings("p").slideToggle(100);
    // or  .next("p"). ...

    e.preventDefault(); // to prevent default anchor functionality
});

javascript - slidetoggle vertical menu: Children not working - Stack O...

javascript jquery
Rectangle 27 0

you're removing the span.plus try setting the text like this:

if($(this).siblings('.plus').text() == '+')
    $(this).siblings('.plus').text('-');
else
    $(this).siblings('.plus').text('+');

javascript - jquery menu using slidetoggle() slight issue - Stack Over...

javascript jquery slidetoggle
Rectangle 27 0

hover
$('li').hover(function(){
    $(this).children('ul').slideToggle();
});

One more question. Each li of .inner_menus ul is a link. Once you click it the part next to the menu changes, but the menu stays at it's place. Assume I used $('li').click() instead(and firstly I hide all the .inner_menu ), then after I click the News and then Hi, the part of web changes, bud also the the Hi disappears. That's a bit odd because you would have to click it each time. I would like it to stay in the same status, that is hidden or shown.

I'm not sure to understand what you mean, update jsfiddle to replicate your issue

Well, I am using Flask and Jinja2 templates, so I can not simple updated jsFiddle:(

So I have tried to update it, the problem is, I don't want the .inner_menus to slideUp after you click on the links. jsfiddle.net/8Mhrw/3

javascript - How to slideToggle() parts of menus? - Stack Overflow

javascript jquery html
Rectangle 27 0

$(document).ready(function () {
    $('.accordion:eq(0) > span').click(function () {
        $(this).next().slideToggle('fast');
    });
    $('.accordion:eq(0) > span').next().hide()
});
$(document).ready(function () {
    $('.accordion:eq(0) > span').click(function () {
        $(this).next().slideToggle('fast');
    }).click();
});

javascript - How to show slideToggle closed by default? - Stack Overfl...

javascript jquery html menu slidetoggle
Rectangle 27 0

<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://webdesign9.in/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function($) {
$.fn.menumaker = function(options) {  
 var cssmenu = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().addClass('open');
       if (settings.format === "dropdown") {
         mainmenu.find('ul').show();
       }
     }
   });
   cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
     cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenu.find('.submenu-button').on('click', function() {
       $(this).toggleClass('submenu-opened');
       if ($(this).siblings('ul').hasClass('open')) {
         $(this).siblings('ul').removeClass('open').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else cssmenu.addClass('dropdown');
   if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
  var mediasize = 900;
     if ($( window ).width() > mediasize) {
       cssmenu.find('ul').show();
     }
     if ($(window).width() <= mediasize) {
       cssmenu.find('ul').hide().removeClass('open');
     }
   };
   resizeFix();
   return $(window).on('resize', resizeFix);
 });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
   format: "multitoggle"
});
});
})(jQuery);
    </script>
   <title>WELCOME TO WEBDESIGN9.IN</title>
   <style>
   #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:sans-serif;background:#EEE;}
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#ddd;font-weight:700;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#448D00!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#333;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#ddd;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#363636;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:900px){
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none}
.logo2{display:none}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none}
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#333!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#ddd;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700}
.button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:34px;width:34px}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}
#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}
}
   </style>
</head>
<body>

<header>
<nav id='cssmenu'>
<div class="logo"><a href="index.php">Responsive </a></div>
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>PRODUCTS</a>
   <ul>
      <li><a href='#'>Product 1</a>
         <ul>
            <li><a href='#'>Sub Product</a></li>
            <li><a href='#'>Sub Product</a></li>
         </ul>
      </li>
      <li><a href='#'>Product 2</a>
         <ul>
            <li><a href='#'>Sub Product</a></li>
            <li><a href='#'>Sub Product</a></li>
         </ul>
      </li>
   </ul>
</li>
<li><a href='#'>BIO</a></li>
<li><a href='#'>VIDEO</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
</nav>
</header>
</body>
<html>

(1) While this code block may answer the question, it would be best if you could provide a little explanation for why it does so. (2) You should use your flags to mark this question as a duplicate some other question where you posted the exact same answer (1, 2, 3, 4). If this is not a duplicate then provide custom answers and don't simply copy them to multiple questions.

html - CSS Drop Down Menu - Stack Overflow

html css html5 css3
Rectangle 27 0

$(function(){
        $('ul#menu li').on('click', function(){
            if($(this).children('.drop').size() > 0) {
                $("ul.drop").slideUp();
                $("ul.drop").find('ul').hide();
            } else {

            }

         $(this).children('ul').delay(20).slideToggle(600);
        });
    });

    $('ul').on('click', function(e){
      e.stopPropagation();
    });

Almost, the issue now is that if you go a few levels deep (Home>Item 4>Sub Item 1) and then move to another menu, when you click on Home again it opens all the way down to where you were... it really shouldn't.

Looks like it does! Thanks. What about not letting them overlap? Having the ones that are open slide up before the one you just clicked on slides down? is that possible?

I think, you can just do a .hide() instead of .slideUp(). That would reduce the overlap. BTW, if this answer worked for you, would you accept this? :)

I'm happy to accept it as you fixed the most important issue. No problem. ;) Unfortunately there's just no way I can lose slideUp. Is it to hard to fix this part or simply not doable?

javascript - Slide Down Menu - How to allow only one path open at a ti...

javascript jquery css menu slidetoggle
Rectangle 27 0

You can add the following line in your $(".subtabs").click

$('.subtabs').not(this).nextUntil(".subtabs").slideUp();

What'll do is pull up, all the subtabs apart from the one currently active

javascript - Vertical multilevel Menu slideToggle - Stack Overflow

javascript jquery html css jquery-ui
Rectangle 27 0

You could check the CSS height of every sub-element. If it's greater than 0, your .plus-element should replaced by a "+" again. slideToggle() does nothing else than changing the height of en element. You can read about it here

javascript - jquery menu using slidetoggle() slight issue - Stack Over...

javascript jquery slidetoggle
Rectangle 27 0

You'll have to refactor this a bit to get it to work the way you want it to.

The .cbp-hrsub element containing the sub text is positioned absolutely, overlaying any text below. You would need to remove position:absolute to revert to the browser default position:static.

However, as the .cbp-hrsub element is part of each menu <li>, this pushes the other <li> elements down.

I'd suggest splitting the HTML out so that your menu <li> elements are separate to your sub text elements. Contain the subtext elements in a new <ul> and get these to slide down on click of the associated menu item link.

I see what you're saying ... I need to put the List items separate to the drop down content though I'm thinking this won't work because of the way the javascript functions?

Yes, you might struggle to get this to work with the existing JavaScript from CODROPS. I'm not familar with the CODROPS script itself but you may find it easier to build your own Mega Menu from scratch to get this working the way you want it to.

Well with my javascript knowledge at the moment it'll be impossible for me to write it myself unfortunately. There is this script that structured like the way we want it: impressivewebs.com/mega-menus-ajax-jquery ... but I've given up with trying to make that drop down menu to NOT load up external pages (I don't understand why upload content from external pages as it's non SEO friendly!). So in a way it's basically what I want but another issue is that I can't make it responsive because of the height issue involved (otherwise the animations are fickle) - FRUSTRATING!!!

Otherwise with regards to the slideToggle would you know where to apply this in the javascript? I was pretty confident I'd know how to but I'm obviously missing something

You could add slideDown() and slideUp() function calls into the existing open() and close() functions already present in the JSFiddle you provided. To do this you would need to target the correct subtext list item using something like $('ul.subText li:eq(' + index + ')').slideDown();

javascript - Make Menu have a slideToggle Effect and push below elemen...

javascript jquery html css css3
Rectangle 27 0

<nav class="menu-opener">
    <div class="menu-opener-inner"></div>
  </nav>
  <nav class="menu">
    <ul class="menu-inner">
      <li><a href="#" class="menu-link">Accueil</a></li>
      <li><a href="#" class="menu-link">Portfolio</a></li>
      <li><a href="#" class="menu-link">Themes</a></li>
      <li><a href="#" class="menu-link">Templates</a></li>
      <li><a href="#" class="menu-link">Contact</a></li>
    </ul>
</nav>

If you are going to use <a> elements in a <ul> element, you need to wrap in in an <li> element. You should actually wrap anything in a <ul> element with an <li> element.

Im aware of that but in the example the programmer did it like in the link i provided. But let's say i would want to add that class to my wordpress menu anchors, how would you proceed?

You would add that CSS to wordpress in a custom stylesheet... @Mickeymai

javascript - anchor wrapped li for Slide-out menu in wordpress - Stack...

javascript css wordpress menu slidetoggle
Rectangle 27 0

The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.

#navlist {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: 'Dhurjati', sans-serif;
    font-size: 45px;
    position: relative;
    }
    .navlistitems {
        position: relative;
        padding: 25px 0 0;
        display:block;
        float: left;
        color: #000;
        }

        #nav_animations {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: 100%;
            }
            #greenHome {
                display: none;
                }
            .nav_square {
                background-color: green;
                width: 100%;
                height: 15px;
                z-index: 22;
                position: relative;
                }
$(document).ready(function(){
    $('#home').hover(function(){
        $('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
    });
});
<ul id="navlist">
    <li class="navlistitems" id="home">Home
        <ul id="nav_animations">
            <li class="nav_square home_square" id="greenHome"></li>
        </ul>
    </li>
</ul>

That looks good but I want the green bar to be above the nav menu.

I'll modify my solution in a moment then. I was assuming the green bar would be a part of the subnav that would appear. Give me 5 minutes.

Here's an updated JSFiddle. Your CSS needed quite a bit of change: jsfiddle.net/84amnjz7/1 I'll now update the solution I gave.

javascript - Nav menu moves down when .slideToggle is used on div abov...

javascript jquery html css css-position
Rectangle 27 0

$(this).siblings('.plus').replaceWith(' - ');
if($(this).siblings('.plus').length > 0){
    $(this).siblings('.plus').removeClass('.plus').addClass('.minus').text(' - ');
}
else {
    $(this).siblings('.minus').removeClass('.minus').addClass('.plus').text(' + ');
}

Or even have two spans:

<span class="plus"> + </span><span class="minus"> - </span>

.plus is visible and .minus is display: none;. Then when you toggle the next element just do:

$(this).siblings('.plus, .minus').toggle();

cool that is also a good way.

javascript - jquery menu using slidetoggle() slight issue - Stack Over...

javascript jquery slidetoggle
Rectangle 27 0

So, after spending another 6 hours researching and trying different things, I ended up with the following, which solved the problems I was having.

var menuSwitch = function(menu) {

    if ($(menu).is(':hover') === false) {
        var hideMe = setTimeout(function() {
            $(menu).slideToggle(500);
        },4000);
    }

    $(menu).on('mouseenter mouseleave', function(e) {

        switch(e.type) {

            case 'mouseenter':

                console.log('probed');
                clearTimeout(hideMe);
                $(this).stop();
                $(this).slideDown(200);
                break;

            case 'mouseleave':

                $(this).delay(2000).slideUp(500,function() {
                    $('li>ul',menu).hide();
                    console.log('switched');
                });                 
                break;
        }
    });
}


var babies = function(menu) {
    $('li',menu).unbind('mouseenter mouseleave click');

    $('li',menu).each(function() {
        if ($('li',menu).children() != false) {

            $(this).on('click',function(e) {
                e.preventDefault();
                $(this).children('ul').slideToggle(300);                    
            });
        }
    });

}


var menuCtrl = function(menu) {
    $(menu).slideToggle(500);

    $(menu).unbind('mouseenter mouseleave');

    menuSwitch(menu);

    babies(menu);
}


$('.usa').click(function(e) {
    e.preventDefault(); 

    menuCtrl('.usaMenu');

});

Ultimately it turned out that because the initial click handler was running the functions every time it fired, it was creating duplicates of the mouseenter/leave event handlers, and therefore causing all sorts of problems. I was also trying to make the menu close if the mouse never entered, in the wrong way.

To solve the most obnoxious issue (duplicate event handlers), I simply used the unbind() api, passing it the events to unbind at the start of the function, so that when they were re-bound, there was only one instance. This may not be the most efficient way, but it works.

To solve the timing/hiding if no mouseenter issue, I used a setTimeout function, which was then cleared if mouseenter-ed.

javascript - jQuery slideToggle menus based on mouseenter/leave - Stac...

javascript jquery
Rectangle 27 0

If you want to open only the child of the parent of the a clicked you can use next. Try with:

$('.menu-header ul li a',this).click(function(){      
     $(this).next("p").slideToggle(100);
});

This didn't work for me.

javascript - slidetoggle vertical menu: Children not working - Stack O...

javascript jquery