Benvenuti da Idea R | Vicenza - Romano di Lombardia (Bergamo)

Blog

Prendere uno smanettone del software degli anni 80, aggiungere un graphic designer di nuova generazione e allungare il tutto con uno studioso di strategie di marketing. Agitare energicamente e si ottiene il blog Idea R.

Dropdown menus with CSS

Pubblicato il 1/1/2012
Categorie: Siti Web
Tag: CSS, HTML, Tutorial
Dropdown menus with CSS

Questo articolo è disponibile anche in italiano.

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]

Sei il lettore numero 12,510.

Commenti

Articolo precedente

Articolo precedente

Schede personalizzate in Facebook

Articolo successivo

Come cancellare la cache degli oggetti SqlDataSource

Articolo successivo