Issue with dropdown sub-menu

Question

So I am trying to teach myself how to create and customize wordpress websites, and I have been stuck on this piece of code for 2 days now. So I'm posting here so maybe someone can help me understand what I am doing incorrectly. I started teaching myself only about a week or two ago so that's some background of my knowledge.

Well I am trying to create a navigation menu that goes in the header of a webpage just under the site-header container. The theme doesn't offer a menu location besides in the sidebar widget and the footer. I have managed to go through and add a new theme location for a custom menu through the theme files.

The issue I am having is I can't manage to style it in CSS so that the submenu drops down when you hover over the page in the top navigation menu. Here is the html and CSS I currently have for the seciton I am having trouble with:

 .top-menu {} .top-menu ul { list-style-type: none; overflow: hidden; width: 900px; margin: 0px auto; ; } .top-menu ul li { width: 175px; height: 50px; float: left; } .top-menu ul li.current-menu-item { background: blue } .top-menu ul li:hover { background: red } .top-menu ul a { font: 20px Cantarell, Arial, sans-serif; color: #000; display: block; width: 175; height: 50px; line-height: 50px; text-decoration: none; text-align: center; } .top-menu ul ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; padding: 0 } .top menu ul ul li { float: none; width: 200px; } .top menu ul ul a { line-height: 120%; padding: 10px 15px } 

 <div class="top-menu"> <ul id="menu-header" class="menu"> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://notmymamaskitchen.com/home/">Home</a> </li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://notmymamaskitchen.com/about/">About</a> </li> <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://notmymamaskitchen.com/recipes/">Recipes</a> <ul class="sub-menu"> <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="http://notmymamaskitchen.com/category/appetizers-snacks/">Appetizers &amp; Snacks</a> </li> <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="http://notmymamaskitchen.com/category/breads/">Breads</a> </li> <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://notmymamaskitchen.com/category/breakfast/">Breakfast</a> </li> </ul> </li> <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://notmymamaskitchen.com/contact/">Contact</a> </li> </ul> </div> 

Please Help!, I'm running out of hair to pull :/

PS. This is my first question I have asked on this site.

Answer 1

The jsfiddle of Michael comment will help you, I recommend you to use it, the only thing that I don't like it is the use of Descendant Selectors and the use of opacity: 0 instead of display: none (I know that is for the transition but in that way you will show the menu point below it) but in general it is a good starting point.

I only want to give you some tips to help you understand it and another to improve your code.

Understanding the behavior.

You has .top-menu ul ul {display: none;} so your .sub-menu will not be displayed at all (has no effect on layout) so to show it we use :

.menu-item{
    position: relative; /*with respect to this element sub-menu is positioned*/
    color: #333;
}
.menu-item:hover .sub-menu{
    display: block;  /*show the menu when you hover the li.menu-item*/
}

At this point you should see the menu but notice that you have .top-menu ul { overflow: hidden;} so the overflow is clipped, and the rest of the content will be invisible including to .sub-menu just remove it and now you can see your .sub-menu but it will have a style somewhat watered because it is being affected by the styles .top-menu ul , .top-menu ul li , etc.

So my recommendation: use the Michael example as starting point but avoid to use Descendant Selectors not only is this not performant but it is fragile, as changes to the HTML can easily break your CSS, it is preferable to simply create a new CSS class selector which by the way you have already in your html so use them.

Check this out it will help you to improve your code http://modernweb.com/2013/08/12/writing-better-css/?utm_source=html5weekly&utm_medium=email

Answer 2

You have to enable submenu on :hover of parent item:

.top-menu ul li:hover > ul {
    display: block;
}

 .top-menu ul { list-style-type: none; width: 900px; margin: 0px auto; position: relative; } .top-menu ul li { width: 175px; height: 50px; float: left; } .top-menu ul li.current-menu-item { background: blue } .top-menu ul li:hover { background: red } .top-menu ul a { font: 20px Cantarell, Arial, sans-serif; color: #000; display: block; width: 175; height: 50px; line-height: 50px; text-decoration: none; text-align: center; } .top-menu ul ul { display: none; position: absolute; background: #fff; padding: 0 } .top-menu ul ul li { float: none; width: 220px; } .top-menu ul ul a { line-height: 120%; padding: 10px 15px; text-align: left; } .top-menu ul li:hover > ul { display: block; } 

 <div class="top-menu"> <ul id="menu-header" class="menu"> <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://notmymamaskitchen.com/home/">Home</a> </li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://notmymamaskitchen.com/about/">About</a> </li> <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://notmymamaskitchen.com/recipes/">Recipes</a> <ul class="sub-menu"> <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="http://notmymamaskitchen.com/category/appetizers-snacks/">Appetizers &amp; Snacks</a> </li> <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="http://notmymamaskitchen.com/category/breads/">Breads</a> </li> <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://notmymamaskitchen.com/category/breakfast/">Breakfast</a> </li> </ul> </li> <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://notmymamaskitchen.com/contact/">Contact</a> </li> </ul> </div> 

Answer 3

Between all of your tips and help, as well as some assistance from this video , I managed to successfully get a functioning and styled dropdown menu for the website! Thank you everyone!