Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Bring your website contents to first postion. Get it automatically with Infrared CMS!

Blog

Take a software geek from the 80s, add a new generation graphic designer and dilute with a longtime marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano

Dropdown menus with CSS

Published on 1/1/2012
Categories: Web Design
Tags: CSS, HTML, Tutorials
Dropdown menus with CSS

The dropdown menus can be easily created with CSS.
Either horizontal or vertical menus are built using unordered list, that is ul. The dropdown feature is created combining the hover pseudoclass along with the visibility property of nested lists.
The following example shows a horizontal menu where the items expand downward.

#dropDownMenu ul li
{
    display: inline; /* remove the list bullets */
    float: left; /* horiziontal menu */
    width: 150px; /* limit the width of every item */
}
#dropDownMenu ul li ul
{
    visibility: hidden; /* submenus are hidden */
}
#dropDownMenu ul li:hover ul
{
    /* submenues become visible when the mouse hovers the parent item */
    visibility: visible;
}
<div id="dropDownMenu">
<ul>
    <li><a href="item1.html">Menu Item One</a>
    <ul>
        <li><a href="item1-1.html">Sub menu item one</a></li>
        <li><a href="item1-2.html">Sub menu item two</a></li>
        <li><a href="item1-3.html">Sub menu item three</a></li>
        <li><a href="item1-4.html">Sub menu item four</a></li>
    </ul>
    </li>
    this is a menu item without a submenu
    <li><a href="item2.html">Menu Item Two</a></li>
    <li><a href="item3.html">Menu Item Three</a>
    <ul>
        <li><a href="item3-1.html">Sub menu item one</a></li>
        <li><a href="item3-2.html">Sub menu item two</a></li>
        <li><a href="item3-3.html">Sub menu item three</a></li>
        <li><a href="item3-4.html">Sub menu item four</a></li>
    </ul>
    </li>
</ul>
</div>

Since in Internet Explorer 6 the hover pseudoclass is supported only by hyperlinks, it is not possible to use CSS dropdown menus.
One solution is to use a conditional directive to expand statically the menu accordingly to the browser version.

[if IE 6]>
<style type="text/css">
#dropDownMenu ul li ul
{
    visibility: visible; /* submenus are always visible */
}
</style>
<![endif]

You are the reader number 10,002.

Comments

Previous article

Previous article

Custom Facebook tabs

Next article

How to clear the SqlDataSource cache

Next article

Scroll to top