jQuery Click issue for slideUp and SlideDown

Question

in one of my drupal page i have 3 drop menu . when i click on each of theme, it has to open a dropDown menu, but wont work. you can see js and css of that page.

this is my web page : http://pajoohyar.ir/start_standalone

 (function ($) { $(document).ready(function () { $('#cssmenu > ul > li > a').click(function () { $('#cssmenu li').removeClass('active'); $(this).closest('li').addClass('active'); var checkElement = $(this).next(); if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).closest('li').removeClass('active'); checkElement.slideUp('normal'); } if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#cssmenu ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if ($(this).closest('li').find('ul').children().length == 0) { return true; } else { return false; } }); }); })(jQuery); 

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); @charset "UTF-8"; /* Base Styles */ #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; direction: rtl; line-height: 1.5; font-family: tahoma, "Helvetica Neue", "Lucida Grande", sans-serif; font-size: 14px; position: relative; } #cssmenu { width: 750px; background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); direction: rtl; } #cssmenu > ul > li { margin: 0 0 2px 0; } #cssmenu > ul > li:last-child { margin: 0; } #cssmenu > ul > li > a { font-size: 15px; display: block; color: #ffffff; text-shadow: 0 1px 1px #000; background: #565656; background: -moz-linear-gradient(#565656 0%, #323232 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232)); background: -webkit-linear-gradient(#565656 0%, #323232 100%); background: linear-gradient(#565656 0%, #323232 100%); border: 1px solid #000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #cssmenu > ul > li > a > span { display: block; border: 1px solid #666666; padding: 6px 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-weight: bold; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.active > a { background: #97be10; background: -moz-linear-gradient(#97be10 0%, #79980d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d)); background: -webkit-linear-gradient(#97be10 0%, #79980d 100%); background: linear-gradient(#97be10 0%, #79980d 100%); color: #fff; text-shadow: 0 1px 1px #000; border: 1px solid #79980d; } #cssmenu > ul > li.active > a span { border: 1px solid #97be10; } #cssmenu > ul > li.has-sub > a span { background: url(images/icon_plus.png) 2% center no-repeat; } #cssmenu > ul > li.has-sub.active > a span { background: url(images/icon_minus.png) 2% center no-repeat; } /* Sub menu */ #cssmenu ul ul { padding: 5px 12px; display: none; } #cssmenu ul ul li { padding: 3px 0; } #cssmenu ul ul a { display: block; color: #595959; font-size: 13px; font-weight: bold; } #cssmenu ul ul a:hover { color: #79980d; } #borderimg1 { border: 10px solid red; padding: 15px; -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ //border-image: url(border.png) 30 round; } .divstyyle { direction: rtl; text-align: justify; } 

Answer 1

The issue was because of your HTML structure. You have sometimes two links for open the dropdown instead of just one and it cause trouble with the next() selector

The second problem was the inline style on ul element in your HTML code, especially height: 1px; part.

See this working fiddle here