I am trying to create a drop down menu for the navigation.
I have spent the last 2 hours going over tutorials and I still can’t get my head around what I am doing wrong.
I have already converted my html template to my wordpress site, and it seems for drop down menus they use the class “sub-menu” to style it.
What I have gathered is that this sub-menu class applied to the sub <ul> should be display:none and then on hover it should display:block.
I tried all this and spent hours trying to figure it out as nothing was working.
I have uploaded a snippet of my navigation area above and would appreciate if anyone could take a look.
It is very confusing, I have tried altering the nav_main ul ul li properties but nothing came out right, and I need to use the sub-menu class for wordpress to read it.
A few people suggested just using javscript or a wordpress plugin for dropdowns but I would really rather not take any shortcuts and learn how it’s done properly.
Hi, I have reworked your code which is below but here are the main points I want you to realize.
You had your structure something like this for the dropdown
<li><a href="#">About</a></li>
<ul class="sub-menu">
<li>About Sub Menu1</li>
<li>About Sub Menu2</li>
<li>About Sub Menu3</li>
</ul>
Now, notice that the <li> at the very top gets CLOSED right after that anchor, THEN the dropdown comes into play. The nested <ul> needs to still be a child of the <li> to work. Well, it makes it easier proper :).
Now, also you should note that floating and absolute positioning never work together. Absolute positioining wins out. You had an element in your above CSS which had both. Now, also note that you are using a bad way of hiding/showing elements. Display:none/block si bad for screen readers and the only real good way to hide/show elements for a dropdown is to use a huge negative left margin to hide the dropdown, and on hover, set that margin to 0. In the below example I have commented briefly what changes I made in the CSS. The HTML all I changed was the positioning of the ending <li> which I already showed an example above. Hopefully you can study this example because thsi is basically all that you’ll ever need for learning how a dropdown truely works. That’s partly why your CSS wasn’t working above, is because of your improper nesting. You weren’t targeting anything :).
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Test</title>
<link rel='stylesheet' href='new.css' />
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-family: Georgia, serif; background: #bababa; font-size:10px;}
li {list-style: none;
float:left;}
/*Main Navigation Bar-------------------------------*/
#nav_main{
background:url(navmain.png) 0 0 repeat-x;
width:1000px;
height:30px;
border-top: 1px solid #3b3b3b;
border-bottom:1px solid #3b3b3b;
font-size:1.5em;
line-height:1.4em;
font-family:arial;
font-weight:bold;
color: white;
text-transform:uppercase;
margin:0 auto;
}
#nav_main ul {
padding-top:4px;
float:left;
margin-left:40px;
}
#nav_main li {
padding-right: 2em;
}
/*Menu list styling*/
#mainMenu {
clear:both;
zoom:1;
text-align:left;
text-transform:uppercase;
}
#mainMenu a {
color:#DEF;
text-shadow:0 0 2px #004;
text-decoration:none;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#FFF;
text-shadow:0 0 4px #04C;
}[B]
#nav_main ul ul.sub-menu {
position:absolute;
left:0;
top:0;/*these are coordinates so that the browser does not guess where to place*/
margin-left:-999em;/*add this. and remove float:left*/
}
#nav_main ul li
{
position:relative;/*stacking context for dropdown*/
}
#nav_main ul li li
{
position:static;/*reset*/
}
#nav_main ul li:hover ul.sub-menu
{
/*these styles to be applied on hover*/
top:100%;/*visual*/
background:red;/*see it*/
margin-left:0;/*mvoe back on screen*/
}[/B]
</style>
</head>
<body>
<!-- Navigation Main Start-->
<div id="nav_main">
<ul id="mainMenu">
<li><a href="#">Home</a>
<ul class="sub-menu">
<li>Home Sub Menu1</li>
<li>Home Sub Menu2</li>
<li>Home Sub Menu3</li>
</ul> </li>
<li><a href="#">About</a>
<ul class="sub-menu">
<li>About Sub Menu1</li>
<li>About Sub Menu2</li>
<li>About Sub Menu3</li>
</ul>
</li>
</ul>
</div>
<!-- Navigation Main End -->
</body>
</html>
I bolded the selectors I changed. You can read the comments and change around postioning as you see fit. Hope I was able to help you :).
I am actually having a problem now with the hover.
When I hover over a menu the dropdown will appear, but all the sub menus are different widths.
I added width:65px; to the ul li li which made the drop down menus all the same width, but for some menus they have longer text and it doesn’t look good.
Any idea how to solve this?
I checked this guys code with firebug https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html
and I could not see him specify a width anywhere, so I am very confused how he is achieving the drop down menus to all be the same width, and more importantly adjusting the width automatically to longer text.