Home > CSS > A Simple Css Only Hover Dropdown Menu

A Simple Css Only Hover Dropdown Menu


A purely CSS drop-down menu has long been the goal of many webmasters and web designers. Their appeal most probably comes more from the search engine optimization benefits than from the visual appeal. Regardless of the motivation CSS menus are a popular choice. Therefore here is our guide to creating a CSS only drop-down menu.

The HTML

The basic principal of a drop-down menu is actually very simple, so lets take a look at the code. In terms of the HTML the first thing to do is to divide each of your navigational elements into unordered lists. One of these lists should be made up of your main navigation elements the other lists will be the drop down options for each of the main menu headings.

These sub-menu lists should be nested within the primary navigation list so that each sub-menu occurs within the parent list item to which it relates, as shown below.

<ul id="menu">

<li><a href="#">About Us</a>
<ul>
<li><a href="#">The Team</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Vision</a></li>
</ul>
</li>

</ul>

The CSS

<style>

li ul {

display: none;

}

li:hover ul {

display: block;

}</style>

Your required minimal form of dropdown menu can be found bellow for download.

  • Thats it, a drop-down menu created with HTML and CSS alone. Feel free to use the above code as it is or as a starting point for creating a far more advanced CSS menu.
  • In terms of browser compatibility the above menu will display correctly in all the modern browsers as far as I am aware.
  • The drop down menu is fast, simple and effective
  • A drop down menu could never be so simple to design and using CSS alone.
  • The menu is designed purely using CSS and avoids any jQuery or Javascript library which makes it much more faster and simple.

A more advance version ready to use and good looking can be found bellow.

  1. Ani
    January 19, 2013 at 6:09 AM

    Thanks very much for such an insightful job. I tried using your example in an asp.net data list control with sub menus in repeater control, it does not display well and the parent items overlap other parent items in the same column (sometimes row). Is there a way that this can be robust and makes the parent items below push down instead of overlapping?. Your insightful answers/suggestion will be appreciated. Thanks

  1. July 9, 2012 at 7:43 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 90 other followers

%d bloggers like this: