SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Main navigation and dropdown problem

    Hi,

    my dropdown menu has disappeared. Can't find the problem, so I need a new pair of eyes to look at my code. link.

    I would also like my main navigation to stay white when hovering over the dropdown menu. Any thoughts? I'm using Wordpress as CMS and this is a custom menu generated by WP.

    Code:
    /* NAVIGATION */
    
    #nav {
    	float:right;
    	margin: 130px 0 0 0;
    	font-family: ArvoRegular, Rockwell, sans-serif;
    	font-size:20px;
    	}
    
    #nav ul {  
    	list-style-type:none; }
    	 
    #nav li { 
    	float:left; 
    	}
    	
    #nav li a { 
    	padding:15px 20px 20px 20px;
    	color:#646360;
    	text-decoration:none;
    	display:block;
    	border-top-left-radius: 10px;
    	border-top-right-radius: 10px; 
    	}
    
    #nav li a:hover,#nav li a:active { 
    	color:#d93434;
    	background:#fff;
    	background: hsla(58, 0%, 100%,.9);
    	}
    
    #nav li.current-menu-item a, #nav li.current_page_parent a, #nav li.current-category-ancestor a, #nav li.current-post-parent a { 
    	color:#d93434;
    	background:#000;
    	} 
    
    
    /* SUB MENU */
    
    #nav li ul.sub-menu, #nav li.current-menu-item ul.sub-menu { 
    	font-size:14px;
    	display: none;
    	background:#fff;
    	background: hsla(58, 0%, 100%,.9);
    	margin:0;
    	}
    	
    #nav li ul.sub-menu li { 
    	float:none;
    	margin: 0;
    	padding:0;
    	border-radius:0px;
    	}
    	
    #nav li ul.sub-menu li a { 
    	padding:7px 10px;
    	display:block;
    	border-radius:0px;
    	}
    	
    #nav li ul.sub-menu li a:hover { 
    	background:#d93434;
    	color:#fff;
    	}
    
    #nav li:hover > ul.sub-menu {  
    	display: block;  
    	position: absolute;    
    	padding: 0;
    	}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    There are no sub lists in your HTML. No amount of CSS can fix that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well of course they are there! But for some reason the complete html for the dropdown disappears. I don't know why...

    Edit: sorry my bad, wrong link! --> link

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ah, that's better.

    The first thing I notice is that you have a div between the main UL and the LIs:

    <div class="menu-custom-menu-container">

    You can't have anything between the UL and the LIs. So you'll need to remove that first, and perhaps transfer the class if it's needed (though that's unlikely).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m,

    that's how Wordpress renders the HTML for the navigation and dropdown. My code for this:

    HTML Code:
    <ul id="nav">
        <?php wp_nav_menu( array(
            'menu' => 'custom menu' ,
            'link_before' => '<span>' ,
            'link_after' => '</span>' ));
            ?>
    </ul>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It would be best to dig into the code and remove that, then. Is that really native WP behavior? That's terrible.

    EDIT: ah, actually, the problem is the outer UL <ul id="nav">. That should be removed. (This may also be causing the problem, by confusing the CSS rules. Either way, it's invalid HTML, so remove it.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph.m: indeed that was the problem. I deleted it, but still no dropdown

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ah well, it's good to get that code cleaned up, anyhow.

    As it turns out, the problem is with the overflow: hidden on the "header" div itself. That is hiding the drop down:

    Code:
    #header {
      margin: 0 auto;
      overflow: hidden;
      padding: 0 15px;
      position: relative;
      width: 900px;
    }
    You'll have to remove that and use another clearing method. I suggest you use the "clearfix" method:

    Force Element To Self-Clear its Children | CSS-Tricks
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that's it. Thanks...

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wanted to ask how I can solve the problem, but you posted the solution already


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
  •