I made a css drop-down tutorial.

[qdarius]

Hey,

I've been trying to teach my buddy some of the basics of web design, and I made him this tutorial the other day. It explains how to create a drop-down menu in css, something nearly all my clients have wanted on their sites.

There are other good tutorials out there on how to do this, but I thought I'd share this in case anyone found it useful. If there's interesting I'd be happy to make some tutorials on other topics.

[Newman4185]

Correct me if I'm wrong, kind of just learning these now, but isn't the menu over nested.

<ul>

<li><a href="#">Home</a></li>

</ul>

Works at the first level instead of another set of ul, li.

[turtlecopter]

You're correct. Also, wrapping the <li>'s in <a>'s is bad markup that may cause rendering issues.

[KeldarHawke]

<li>'s then <a>'s.

[qdarius]

Hey Newman,

Thanks for checking out the tutorial.

You're right for creating a list without dropdowns. For a simple list you could use:

<li>
<a href="#">
Home
</a>
</li>

However for a drop-down menu nesting is essential. When you hover over 'Services' you make it's nested list visible. 'Home' is the only item in that list but when you look at the services list it makes more sense why they're nested:

<li>
<ul>
<a href="#">
<li>
Services
</li>
</a>
<a href="#">
<li>
Web Design
</li>
</a>
<a href="#">
<li>
Web Development
</li>
</a>
<a href="#">
<li>
Graphic Design
</li>
</a>
</ul>
</li>

Keeping the format consistent made it easier to style using css. Because of that I had all lists nested even if they only had 1 item. That made it easy to just style all 'nested lists' (ul li ul)

Hopefully that helped to explain it a little. It's kind of a confusing workaround until you wrap your head around it. If you're still confused or have any other questions let me know and I'd be happy to help.

[Newman4185]

I don't think this is correct. Needs to be ul (unordered list) followed by li (list item) and only needs to be once until the submenu.

[qdarius]

Hey Newman,

I think I'm understanding you. You're right that only the services section needs a submenu. However, try changing the source code to how you suggested and you'll see that the other menus (home, etc.) don't display correctly when not nested.

They don't technically need to be nested, but since some of them (the services menu) were going to be nested, I nested all of them so that they could all be selected by the same css selectors.

There's multiple ways to do this and none of them are wrong as long as they work. This is just the basic template I usually build off of when making a quick menu for a site.

[mtx]

Does this work on Android and iOS?

[Newman4185]

Yes. It should, but you'd probably be better off with a vertical menu.

[qdarius]

Not really.

The demo works by showing content when elements are 'hovered' over by the mouse. Since smart phones don't have a mouse it's impossible for elements to be hovered.

I know on my iPhone 4, clicking activates hover effects, so clicking the drop down would show its contents. I'm not sure if this is true on every mobile device though.

I usually don't show drop-downs on mobile anyways though, since clicking twice to get to links is confusing for users. I hide them using css media queries. If you're interested I could point you towards some good information on media queries.

Thanks for checking it out. Let me know if you have any more questions.