SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast jcorbin's Avatar
    Join Date
    Apr 2010
    Location
    Chicago, IL, US
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Sub menu on drop down menu doesn't hide

    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!

    Code:
    #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;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Your style syntax is slightly wrong. Your main <ul> has the id="menu-main_nav", so to target the sub <ul>, rather than this:

    Code:
    #menu-main_nav ul ul {
        display: none;
        position: absolute;
        top: 70px;
    }
    you should have this:

    Code:
    #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:

    Code:
    #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;
    }

  3. #3
    SitePoint Enthusiast jcorbin's Avatar
    Join Date
    Apr 2010
    Location
    Chicago, IL, US
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hm, you site seems to be down now.

  5. #5
    SitePoint Enthusiast jcorbin's Avatar
    Join Date
    Apr 2010
    Location
    Chicago, IL, US
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Raph.m Ok, should be working. Maybe my host was having issues. http://www.jcorbindesign.com/wordpressbeta/

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  7. #7
    SitePoint Enthusiast jcorbin's Avatar
    Join Date
    Apr 2010
    Location
    Chicago, IL, US
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,575
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    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.

  10. #10
    SitePoint Enthusiast jcorbin's Avatar
    Join Date
    Apr 2010
    Location
    Chicago, IL, US
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    PHP Code:
    <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 -->

    HTML Code:
    <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 -->


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •