Pure CSS Only Dropdown Menu

UPDATE — Find the better, updated 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, Chrome, Safari, and even IE and works 100% without any JavaScript.

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, I would recommend trying to simplify and organize your menu better.

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. The menu can also very easily have images incorporated.

Code

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}

HTML

<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>

  • Anonymous Pancake

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

  • 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)

  • 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:

    • 1
    • 2
    • 3

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

    • 1
    • 2
      • Sub 1
      • Sub 2
    • 3

    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:

    • 1
    • 2
      • Sub 1
      • Sub 2
        • Sub Sub 1
    • 3

    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

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

    Thanks, Bryan