Sub menu on drop down menu doesn't hide

[jcorbin]

I'm working on a drop down menu that is setup in WordPress. (The theme i'm using is a starter theme from http://underscores.me but the CSS is mine)

The issue I'm having is the sub-menu item doesn't hide. I double checked my code and even pulled the menu code from the twenty eleven theme to see if it was an error in my code, but I got the same result.

The construction site is located at: http://www.jcorbindesign.com/wordpressbeta/ and I've provided the CSS below. Any help would be greatly appreciated!

#menu-main_nav {
    background-image: url('./images/navibar.jpg');
    background-repeat: no-repeat;
    height: 70px;
}

#menu-main_nav li {
    display: block;
    float: left;
    height: 70px;
    line-height: 70px;
    position: relative;
}
     
#menu-main_nav li a {
    display: block;
    height: 70px;
    line-height: 70px;
    padding: 0 15px;
}

#menu-main_nav .current-menu-item a, #menu-main_nav .current_page_item a, #menu-main_nav a:hover {
    color: #939598;
    background: #fff;
}

#menu-main_nav ul ul {
    display: none;
    position: absolute;
    top: 70px;
}

#menu-main_nav ul ul li {
    float: none;
    width: 150px;
}

#menu-main_nav ul ul li a {
    padding: 5px 10px;
}

#main-nav ul li:hover > ul {
    display: block;
}

[ralph.m]

Your style syntax is slightly wrong. Your main <ul> has the id="menu-main_nav", so to target the sub <ul>, rather than this:

#menu-main_nav ul ul {
    display: none;
    position: absolute;
    top: 70px;
}

you should have this:

#menu-main_nav ul {
    display: none;
    position: absolute;
    top: 70px;
}

Otherwise you are targeting a <ul> inside the sub <ul>.

This applies to all therules with ul ul in it. The above one is just a sample.

So try this:

#menu-main_nav {
    background-image: url('./images/navibar.jpg');
    background-repeat: no-repeat;
    height: 70px;
}

#menu-main_nav > li {
    display: block;
    float: left;
    height: 70px;
    line-height: 70px;
    position: relative;
}
     
#menu-main_nav li a {
    display: block;
    height: 70px;
    line-height: 70px;
    padding: 0 15px;
}

#menu-main_nav .current-menu-item a, #menu-main_nav .current_page_item a, #menu-main_nav a:hover {
    color: #939598;
    background: #fff;
}

#menu-main_nav ul {
    position: absolute;
    left: -9999px;
    top: 70px;
}

#menu-main_nav ul li {
    float: none;
    width: 150px;
}

#menu-main_nav ul li a {
    padding: 5px 10px;
}

#menu-main_nav li:hover ul {
    left: 0;
}

[jcorbin]

Hi Raph.m thanks for the help. I made adjustments to the code which hides the sub-menus. But I can't get them to appear on rollover.

[ralph.m]

Hm, you site seems to be down now.

[jcorbin]

Hi Raph.m Ok, should be working. Maybe my host was having issues. http://www.jcorbindesign.com/wordpressbeta/

[ralph.m]

Hm, I'm still getting a 406 Not Acceptable page:

Not Acceptable

An appropriate representation of the requested resource /wordpressbeta/ could not be found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

[jcorbin]

I'm not sure then. I checked on one of my other browsers that wouldn't have it cached and I can log in the site just fine. I created a testpage and added it to the menu, see if this link works. http://www.jcorbindesign.com/wordpressbeta/test-page/

[ralph.m]

Hm, still getting the 406 message. May just be me—I've been getting a bit of this from down here of late (when people post links here).

An alternative would be to post your page code here—preferably make up an html page with the CSS inside <style> tags.

[ronpat]

I can access the site with no problems.

The following link will take you to an excellent template for setting up just this kind of menu:

http://www.pmob.co.uk/temp/drop-down-basic-good.htm

Perhaps it will help.

FYI: there is one inconspicuous flaw on the style.css sheet. Around Line 117, the comment marks around the anchors are interfering with the vertical positioning of center_board.jpg. They need to be removed or applied properly.

[jcorbin]

Hi Ralph.m,

Ok, I have enclosed html/php source code and the generated website code for a clearer comparison.

Ronpat, Thanks for the example source! I have complied into separate css and html so I can review it more closely

<nav role="navigation" class="site-navigation main-navigation">
            <!-- Adaptive menu needs style rules set <h1 class="assistive-text"><?php _e( 'Menu', 'jcorbin_design' ); ?></h1>
            <div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'jcorbin_design' ); ?>"><?php _e( 'Skip to content', 'jcorbin_design' ); ?></a></div> End Adaptive menu div-->

            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- .site-navigation .main-navigation -->

<nav role="navigation" class="site-navigation main-navigation">
	 <!-- Adaptive menu needs style rules set <h1 class="assistive-text">Menu</h1>
	 <div class="assistive-text skip-link"><a href="#content" title="Skip to content">Skip to content</a></div> End Adaptive menu div-->

	 <div class="menu-main_nav-container"><ul id="menu-main_nav" class="menu"><li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-8">

<a href="http://www.jcorbindesign.com/wordpressbeta/">Home</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109">
<a href="http://www.jcorbindesign.com/wordpressbeta/services/">Services</a>

<ul class="sub-menu">
	<li id="menu-item-134" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134">
<a href="http://www.jcorbindesign.com/wordpressbeta/graphic-design/">Graphic Design</a></li>
</ul>
</li>
<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://www.jcorbindesign.com/wordpressbeta/about/">About</a>
<ul class="sub-menu">
	<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://www.jcorbindesign.com/wordpressbeta/portfolio/">Portfolio</a></li>
</ul>
</li>
<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107">
<a href="http://www.jcorbindesign.com/wordpressbeta/get-an-estimate/">Get an Estimate</a></li>
<li id="menu-item-130" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130">
<a href="http://www.jcorbindesign.com/wordpressbeta/category/blog/">Blog</a></li>
<li id="menu-item-137" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-137">
<a href="http://www.jcorbindesign.com/wordpressbeta/test-page/">test page</a></li>
</ul>
</div>
</nav><!-- .site-navigation .main-navigation -->