Title: Problem with JS menu drop down length
Last modified: August 21, 2016

---

# Problem with JS menu drop down length

 *  [Chateaupoulet](https://wordpress.org/support/users/chateaupoulet/)
 * (@chateaupoulet)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problem-with-js-menu-drop-down-length/)
 * Hi there,
 * I’m having a problem setting the length of a js drop down menu. I have adjusted
   it before successfully using a menu.css but cannot seem to make it work now. 
   The site is [http://www.hottotrotracingclub.com](http://www.hottotrotracingclub.com)
   and the menu in question is Horses.
 * This is the code in menu.css:
 * ‘ul.sdt_menu li div.sdt_box_horses {
    width:210px; }ul.sdt_menu li div.sdt_box_horses{
   height:1800px;} ul.sdt_menu li div.sdt_box a{ float:left; clear:both; line-height:
   30px; color:#ebdc9d;’
 * Setting the length at 1800 causes the menu to drop down to 1800 but then “bounce
   back up” to a height that leaves the last horse out of the list.
 * Is there anything else I need to provide?
 * Hope this makes sense and thank you for any help you can give.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [wpismypuppet](https://wordpress.org/support/users/wordpressismypuppet/)
 * (@wordpressismypuppet)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problem-with-js-menu-drop-down-length/#post-4478792)
 * Yes… it is a JavaScript menu, so you’ll probably need to adjust the JavaScript
   as well to reflect the new height. Once JavaScript start to play with an element’s
   styles, the CSS file controlling those styles are overridden because JavaScript
   will then make inline styles. It works on the first drop down, but JS takes over
   from there.
 * However I strongly advise you to find a better menu system. If JavaScript is 
   disabled (which a lot of people do for security) your website is rendered completely
   useless. Not to mention SEO will suffer as crawlers have a harder time with JS
   menus. Many of your pages might not get registered with Google and the likes.
 * JavaScript is nice to enhance certain aspects of a website, but it should never
   be used as the only means of functionality.
 *  Thread Starter [Chateaupoulet](https://wordpress.org/support/users/chateaupoulet/)
 * (@chateaupoulet)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problem-with-js-menu-drop-down-length/#post-4478903)
 * Thank you very much for that. I’ll look at the JS again and explore alternative
   menu systems for the future.
 *  Thread Starter [Chateaupoulet](https://wordpress.org/support/users/chateaupoulet/)
 * (@chateaupoulet)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/problem-with-js-menu-drop-down-length/#post-4478905)
 * Playing around with the JS but it seems to have no effect. I’m not at all experienced
   with it so I must be missing something.
 * The Trainer menu is working correctly so I copied the JS for that for the Horses
   menu, but no change. Menu.js code:
 * ‘ $(function() {
    /** * for each menu element, on mouseenter, * we enlarge the
   image, and show both sdt_active span and * sdt_wrap span. If the element has 
   a sub menu (sdt_box), * then we slide it – if the element is the last one in 
   the menu * we slide it to the left, otherwise to the right */ $(‘#sdt_menu > 
   li’).bind(‘mouseenter’,function(){ var $elem = $(this); $elem.find(‘img’) .stop(
   true) .animate({ ‘width’:’133px’, ‘height’:’133px’, ‘left’:’0px’ },400,’easeOutBack’).
   andSelf() .find(‘.sdt_wrap’) .stop(true) .animate({‘top’:’60px’},1000,’easeOutBack’).
   andSelf() .find(‘.sdt_active’) .stop(true) .animate({‘height’:’60px’},300,function(){
   var $sub_menu = $elem.find(‘.sdt_box’); var $sub_menu_trainer = $elem.find(‘.
   sdt_box_trainer’); var $sub_menu_membership = $elem.find(‘.sdt_box_membership’);
   var $sub_menu_about = $elem.find(‘.std_box_about’); var $sub_menu_horses = $elem.
   find(‘.std_box_horses’); var $sub_menu_gallery = $elem.find(‘.std_box_gallery’);
 *  if($sub_menu_membership.length)
    { $sub_menu_membership.show().animate({‘top’:’
   80px’,’height’:’200px’,’width’:’185px’},200); } else if($sub_menu_trainer.length){
   $sub_menu_trainer.show().animate({‘top’:’80px’,’height’:’275px’,’width’:’160px’},
   200); } else if($sub_menu_about.length) { $sub_menu_about.show().animate({‘top’:’
   80px’,’height’:’80px’,’width’:’150px’},200); } else if($sub_menu_horses.length){
   $sub_menu_horses.show().animate({‘top’:’80px’,’height’:’600px’,’width’:’150px’},
   200); } else if($sub_menu_gallery.length) { $sub_menu_gallery.show().animate({‘
   top’:’80px’,’height’:’80px’,’width’:’150px’},200); } else if($sub_menu.length){
   var left = ‘133px’; if($elem.parent().children().length == $elem.index()+1) left
   = ‘-133px’; $sub_menu.show().animate({‘top’:’80px’,’height’:’225px’},200); } });}).
   bind(‘mouseleave’,function(){ var $elem = $(this);
 *  var $sub_menu = $elem.find(‘.sdt_box’);
    var $sub_menu_trainer = $elem.find(‘.
   sdt_box_trainer’); if($sub_menu_trainer.length) { $sub_menu_trainer.hide().animate({‘
   top’:’0′,’height’:’0′},200); } else if($sub_menu.length) { $sub_menu.hide().animate({‘
   top’:’0′,’height’:’0′},200); } var $sub_menu_horses = $elem.find(‘.sdt_box_horses’);
   if($sub_menu_horses.length) { $sub_menu_horses.hide().animate({‘top’:’0′,’height’:’
   0′},200); } else if($sub_menu.length) { $sub_menu.hide().animate({‘top’:’0′,’
   height’:’0′},200); }
 *  $elem.find(‘.sdt_active’)
    .stop(true) .animate({‘height’:’0px’},300) .andSelf().
   find(‘img’) .stop(true) .animate({ ‘width’:’0px’, ‘height’:’0px’, ‘left’:’85px’},
   400) .andSelf() .find(‘.sdt_wrap’) .stop(true) .animate({‘top’:’10px’},500); });});’

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Problem with JS menu drop down length’ is closed to new replies.

## Tags

 * [drop-down](https://wordpress.org/support/topic-tag/drop-down/)
 * [height](https://wordpress.org/support/topic-tag/height/)
 * [js](https://wordpress.org/support/topic-tag/js/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [Chateaupoulet](https://wordpress.org/support/users/chateaupoulet/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/problem-with-js-menu-drop-down-length/#post-4478905)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics