CSS - One-level dropdown menu - css

Question

I'm designing Wordpress themes, the only and ever problem I have is dropdown menus.
styling those "ul" and "li" selectors with "display" and... properties.
Even reading tutorials and looking at other websites's CSS (Firebug), I still can't create one!
Is there any particular procedure or good source I can learn it?
Suppose I want to design a one-level dropdown menu.
Thanks

Answer 1

Mahdi,
Creating a cross-browser compatible dropdown menu is quite simple as long as you don't over-complicate it and have a decent understanding element types and the positioning model in CSS. There are some standard examples that can make it quite easy for you as well. I will try and provide as simple an answer as possible for you to understand (as my brain overcomplicated it for a LOOOONG time until I did a little research).
Your Top-Level Menu
It is good practice to have all of your menus including submenus be a ul element. There are a couple of reasons for this.
It naturally has most of the style that you need.
A menu is a list of options anyway, so its not a stretch to make it a list.
It helps disabled individuals
It allows for nesting.
The problem with ul elements is they have those nasty bullets. Additionally, the li children don't naturally flow together. They all appear on separate lines. So, we have two options to fix the li. We can float them, but that can get quite awkward. I don't recommend it. Or we can change its type. Well, we're containing another block in it, so an inline-block is kinda perfect for this.
<!-- the HTML for the menu -->
<ul class="menu">
<li class="submenu">link</li>
<li class="submenu">link</li>
<li class="submenu">link</li>
</ul>
/* The CSS for the menu */
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
li.submenu {
display:inline-block; /* Makes the listitems appear on the same row. */
}
** Your Sub-menus**
Now, nested ul elements must be in a list item. Browsers will always interpret it correctly if you place your dropdown ul in a li itself. Now, we don't have to declare anything funny. Just name your new ul the same as your original menu, like so:
<!-- Your new HTML -->
<ul class="menu">
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
</ul>
/* Your new CSS. Notice nothing has changed. */
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
ul.menu li {
display:inline-block; /* Makes the listitems appear on the same row. */
}
The next step. Getting the drop down to appear.
Now, we have our cross-browser structure, we just need to tweak a couple of things. We need to first make the menu appear and disappear. Since we only want this to happen to a submenu, we get more specific:
/* Add this to your CSS. */
li.submenu ul.menu {
display:none; /* Makes the submenu disappear. */
}
li.submenu:hover ul.menu {
display:block; /* Makes the submenu appear. */
}
Now, if you take a look, your menu appears and disappears appropriately. No styling, just lists for you. Works the same way in all of the browsers... oh wait! IE is making it bigger. Well, that's a simple issue. You see, IE interprets padding differently than the others. Lets make it a non-issue:
/* Add this to your CSS. */
menu * {
padding:0; /* Width problem solved. */
}
Now, one other issue... your submenus are horizontal. The reason is because we told it is should be in our original.
ul.menu li {
display:inline-block; /* Makes the listitems appear on the same row. */
}
We can fix this my being more specific.
/* Add this to your CSS. */
li.submenu ul.menu li {
display:block;
}
Now it is vertical! Test this in any major browser and you will see those are the only components necessary for a cross-browser dropdown menu.
Final HTML for Menu
<ul class="menu">
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
<li class="submenu">link
<ul class="menu">
<li>link
<li>link
<li>link
</ul>
</li>
</ul>
Final CSS for Menu
menu * {
padding:0; /* Width problem solved. */
}
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
li.submenu {
display:inline-block; /* Makes the listitems appear on the same row. */
}
li.submenu ul.menu {
display:none; /* Makes the submenu disappear. */
}
li.submenu:hover ul.menu {
display:block; /* Makes the submenu appear. */
}
li.submenu ul.menu li {
display:block;
}
This solution doesn't require funny positioning or width declarations.
Hope this helps!
FuzzicalLogic

Answer 2

One good source for me was http://lwis.net/free-css-drop-down-menu/
You can see the basic structure used.

Answer 3

If you want to just create a simple one-level menu. It's kind of explained above by Fuzzical Logic but you can use the pseudo-class :hover to show and hide the dropdown menu. It's explained in this article in simple terms.
Hope it helps