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;
}
ralphm
December 3, 2012, 5:28am
2
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 [COLOR="#FF0000"]ul ul[/COLOR] {
display: none;
position: absolute;
top: 70px;
}
you should have this:
#menu-main_nav [COLOR="#FF0000"]ul[/COLOR] {
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;
}
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.
ralphm
December 3, 2012, 11:34pm
4
Hm, you site seems to be down now.
jcorbin
December 4, 2012, 12:04am
5
Hi Raph.m Ok, should be working. Maybe my host was having issues. http://www.jcorbindesign.com/wordpressbeta/
ralphm
December 4, 2012, 12:08am
6
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
December 4, 2012, 12:22am
7
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/
ralphm
December 4, 2012, 1:05am
8
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
December 4, 2012, 1:22am
9
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
December 5, 2012, 3:53am
10
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 -->
