Wordpress dropdown issue

Question

I've created my standard Wordpress menu, including submenu items and for some reason have ran into an issue - the dropdown item appears on page load, and disappears when I hover it then mouse out.

Applying CSS to hide the .sub-menu by default doesn't fix the issue, and I'm inclined to think it's my CSS conflicting but I can't see why. Anyone got any ideas?

The wp_nav_menu output is:

<!-- Navigation -->
<div class="navigate hidden-xs hidden-sm" role="navigation" style="position: relative;">
    <ul>
        <div class="menu-primary-navigation-container">
            <ul id="menu-primary-navigation-1" class="menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item menu-item-14"><a href="http://localhost/aes-wp/">Home</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9"><a href="http://localhost/aes-wp/about-us/">About Us</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-23"><a href="http://localhost/aes-wp/product-areas/">Product Areas</a>
                   <ul class="sub-menu">
                       <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://localhost/aes-wp/product-areas/dust-fume-extraction/">Dust and Fume Extraction</a></li>
                   </ul>
                </li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://localhost/aes-wp/news/">News</a></li>
            </ul>
         </div>          
      </ul>
      <a href="#" class="shop">Shop <i class="glyphicon glyphicon-shopping-cart" style="color: #fff;"></i></a>
    </div>
    <!-- END Navigation -->

...and my associated CSS is as follows:

header .navigate ul li:first-child a {
  border-top-left-radius:     5px; 
  border-bottom-left-radius:  5px; 
  margin-left:                -10px;
}

header .navigate {
  margin:                   120px 0 30px 0;
  width:                    100%;
  height:                   48px;
  border-radius:            5px;
  background:               url("assets/img/nav.png") repeat-x;
}

header .navigate ul:first-child {
  list-style-type:          none;
  margin:                   0;
  padding:                  0 0 0 5px;
  height:                   48px;
  width:                    100%;
  position:                 relative;
}

header .navigate ul:first-child li {
  display:                  block;
  float:                    left;
  height:                   48px;
}

header .navigate ul:first-child li a {
  display:                  block;
  height:                   48px;
  font-size:                14px;
  font-family:              'novnormal', serif;
  color:                    #fff;
  line-height:              48px;
  padding:                  0 15px 0 15px;
}

header .navigate ul li a:hover,
header .navigate ul li a.active,
header .navigate ul li.current-menu-item a {
  text-decoration:          none;
  background:               #8abb06 !important;
}

Thanks in advance for any help guys!

I'm on localhost, sorry - if it helps narrow it down, the dropdown is displayed on page when it first loads - hovering its parent actually removes it - the exact opposite of what I'm trying to achieve! — Graham
Non existant? I'm trying to utilise Wordpress' inbuilt features - something's triggering to hide the menu so I assumed it was preloaded? — Graham
If it dissappears after loading, I would suggest it is javascript causing this behaviour - without having a URL its difficult to help. — Chris

James Waddington James Waddington · Accepted Answer · 2015-01-15T10:57:55

You have some javascript in aes theme, custom.js which is acting on it eg.

$('.navigate ul li ul').bind('mouseleave', function() {
  $(this).hide();
});

To confirm that it is javascript interfering, disable javascript in the browser and it no longer disappears when you mouse out.

Some quick css that might give the desired behavior:

ul.sub-menu {
display: none;
position: absolute;
}

.menu:hover ul.sub-menu {
  display: block;
}

You might prefer a different way in particular to the absolute position - but that might be a starting point.

Wordpress dropdown issue

1 Answers