SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  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,301
    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,301
    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,301
    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 Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,589
    Mentioned
    65 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.

  8. #8
    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
  •