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>