Bryan Hadaway's Blog
Signup for the Best Hosting Around

Pure CSS Only Dropdown Menu

By Bryan Hadaway | Published October 4, 2010 | Need me to update this article?
want to hire me
or
partner with me?

UPDATE: Find the updated and much better script here which I recommend over this one. It’s a little more stylized, but the code is cleaner, better. Just strip the styles off and replace with your own.

This is my first attempt at writing my own CSS dropdown menu from scratch. As always, my main goal is to create clean, minimalist code that works.

Tested successfully in Firefox | IE | Safari | Chrome – Works 100% without any JavaScript at all.

I’ve written the CSS to allow for the dropdown menu to go three levels deep. I personally try to avoid dropdowns altogether on my own personal projects and if I need to, just one level deep.

If you need to go more than three levels deep, there isn’t anything wrong with my script, there’s something wrong with your organizational skills. :P

Demo

Pure CSS Only Horizontal Dropdown Menu | Plain Text Version (Different Code)

Obviously, I’ve left it very blank slate for others to stylize to their tastes, and the menu can also very easily have images incorporated.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Simple CSS Only Dropdown Menu</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />

<style type="text/css">

.dropmenu ul, .dropmenu ul li{
display:inline;
margin:0;
padding:0;
list-style:none}

.dropmenu ul li{position:relative}

.dropmenu ul li a{
display:inline-block;
width:120px;
font-family:georgia;
font-size:14px;
color:#000;
text-align:center;
text-decoration:none;
background:#ddd;
margin:-2px 0px 0px 0px;
border:#999 2px solid;
padding:3px 7px 3px 7px}

.dropmenu ul li a:hover{
display:inline-block;
width:120px;
font-family:georgia;
font-size:14px;
color:#666;
text-align:center;
text-decoration:none;
background:#eee;
margin:-2px 0px 0px 0px;
border:#ccc 2px solid;
padding:3px 7px 3px 7px}

.dropmenu li ul{
display:none;
position:absolute;
top:23px;
left:0px}

.dropmenu ul li:hover ul{display:inline-block}

.dropmenu ul ul, .dropmenu ul li:hover ul ul, .dropmenu ul ul li:hover ul ul{display:none}

.dropmenu ul li:hover ul, .dropmenu ul ul li:hover ul, .dropmenu ul ul ul li:hover ul{display:block}

</style>

</head>

<body>

<div class="dropmenu">
<ul>
<li><a href="">Parent 1</a>
<ul>
<li><a href="">Sub 1</a></li>
<li><a href="">Sub 2</a></li>
<li><a href="">Sub 3</a></li>
</ul>
</li>
<li><a href="">Parent 2</a>
<ul>
<li><a href="">Sub 1</a></li>
<li><a href="">Sub 2</a></li>
<li><a href="">Sub 3</a>
<ul>
<li><a href="">Sub Sub 1</a></li>
<li><a href="">Sub Sub 2</a></li>
<li><a href="">Sub Sub 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Parent 3</a>
<ul>
<li><a href="">Sub 1</a></li>
<li><a href="">Sub 2</a></li>
<li><a href="">Sub 3</a>
<ul>
<li><a href="">Sub Sub 1</a></li>
<li><a href="">Sub Sub 2</a></li>
<li><a href="">Sub Sub 3</a>
<ul>
<li><a href="">Sub Sub Sub 1</a></li>
<li><a href="">Sub Sub Sub 2</a></li>
<li><a href="">Sub Sub Sub 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

</body>

</html>

UPDATE: Find the updated and much better script here which I recommend over this one. It’s a little more stylized, but the code is cleaner, better. Just strip the styles off and replace with your own.

Thanks for reading, Bryan

Other Reads:

Tagged in , , ,

Want to share your website, writing, product or service with all my readers too?  
  • Anonymous Pancake

    Nice job!
    Feel free to post of you eventually find a way to make the multi browser drop down menu, :P

  • http://www.bryanhadaway.com/ Bryan Hadaway

    If you like the menu, you can Google:

    http://www.google.com/search?as_q=ie+hover+fix

    and you’ll find many solutions to make it cross-browser compatible. I just can’t personally find a solution that I’d really feel good about incorporating into the menu, nothing lightweight enough.

    Thanks, Bryan

  • Anonymous Pancake

    Im pretty basic in coding, and every time I try to make each menu/sub menu link somewhere it just makes another box, or ends up messing something else up. Any suggestions? Thanks! (Great website by the way! :D)

  • http://www.bryanhadaway.com/ Bryan Hadaway

    You need to make sure you nest the list items properly. You should always check your work via W3C Validator: http://validator.w3.org/

    Let’s start with a simple example of 3 top level menu tabs:

    <ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

    Now let’s say we want menu tab 2 to have 2 sub menu links below it, we would use:

    <ul>
<li>1</li>
<li>2
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>3</li>
</ul>

    Do you see what we did there? We embedded a whole unordered list within a single list item, it’s “parent”. Now say we want to even add another sub menu to Sub 2, we’d use:

    <ul>
<li>1</li>
<li>2
<ul>
<li>Sub 1</li>
<li>Sub 2
<ul>
<li>Sub Sub 1</li>
</ul>
</li>
</ul>
</li>
<li>3</li>
</ul>

    Try not to just think of it as remembering what to do to make it work… if you can learn the actual concept of properly nesting code and tags in the correct order it’ll come to you and make everything a lot easier than fumbling around with the code until it works.

    Thanks, Bryan

  • http://www.bryanhadaway.com/ Bryan Hadaway

    Update: It’s now cross-browser compatible with absolutely no JavaScript.

    Thanks, Bryan

  • http://bryanhadaway.com/ Bryan Hadaway
Feedback
x close