Pin Me

How to Make Drop Down Menus in a Web Page

written by: Ada Stoy•edited by: Ronda Bowen•updated: 6/22/2010

Drop down menus in a web page are both cute and convenient. There are several ways to make drop down menus in a web page and CSS is the simplest of them. Learn how to make drop down menus in a web page with CSS.

  • slide 1 of 2

    Ways to Make Drop Down Menus in a Web Page

    Drop down menus are very convenient, and it is not surprising that there are many ways to make a drop down menu. The simplest (and probably most popular) way is to use HTML alone or to combine it with some JavaScript. However, if the browser of the user doesn't have JavaScript enabled or the user doesn't want to enable JavaScript, then your menu will not work. If you rely on this menu for navigation (and you definitely do, otherwise why bother making a drop down menu), your whole site might became inaccessible.

    jQuery offers more advanced possibilities for making drop down menus in a page but still it could be a problem as well. DHTML is another alternative to make drop down menus in a web page but still it also has its downsides.

    CSS is yet another approach to making drop down menus in a web page. It is not true to say that CSS is perfect for drop down menus but in many aspects it is the least objectionable choice.

  • slide 2 of 2

    How to Make Drop Down Menus in a Web page With CSS

    So, after you have explored your options how to make drop down menus in a web page, you have decided that you will use CSS for the purpose and will have CSS drop down menus in a web page. You could try using a pure CSS drop down menu generator but if you are confident that you can pull it on your own, here is the simplest way to make a CSS only drop down menu which works in Firefox 2.x, 3.x and Chrome but needs some additional fixes for IE 6.x, 7.x, and 8.x because of the imperfect way in which IE treats hovers. Still, the menu is viewable in IE but the hover effect isn't present.

    1. Include this between <STYLE TYPE="text/css"> AND </STYLE> of your page or in your external stylesheet:

    li ul {

    display: none;

    }

    li:hover ul {

    display: block;

    }

    2. Next, go where the menu should be and create the list of items. We shall create a menu with 3 menu items - Home, Products, and Services. Products and Services will have 3 submenus each. Here is the code:

    <ul>

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

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

    <ul>

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

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

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

    </ul>

    </li>

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

    <ul>

    <li><a href="#">Web Promotion</a></li>

    <li><a href="#">Web Copyrighting</a></li>

    <li><a href="#">SEO Services</a></li>

    </ul>

    </li>

    </ul>

    If you are using this example in a real-life situation, you need to enter the correct URLs instead of <a href=”#”>. This example doesn't use any text formatting and this is why the resulting menu is a very plain one. Of course, you can format your text and background the way you like it and your dropdown menu won't look that simple as the one shown below:

    CSS Dropdown Menu 

    The fact that this menu won't work in IE isn't nice but browser compatibility has always been an issue in web design. However, for those cases when using JavaScript is an absolute no-no, CSS drop down menus come very handy. If you don't use

    li ul {

    display: none;

    }

    IE will show the nested submenus expanded but this will kill the effect in Firefox and the other browsers as well. If you use the code as shown here, in IE Home, Products, and Services will be visible, just the submenus will remain hidden. There is a JavaScript fix for IE and all the other browsers that don't support the :hover pseudo class and one of the the most elegant solutions can be found here.

    CSS drop down menus are better than JavaScript menus but they do have their disadvantages as well. Unfortunately, it is not possible to please all browsers, users, SEO experts (the ones, who hate JavaScript), top management, and the Master of the Universe all at once, so compromises have to be made when you are making drop down menus in a web page.