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

      Idea R - Plan your visual communication at 360°

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

Menu dropdown con CSS

Published on 1/1/2012
Categories: Web Design
Tags: CSS, HTML, Tutorials
Menu dropdown con CSS

This article is available in English too.

I menu dropdown si creano molto semplicemente con CSS.
Tipicamente, sia che si tratti di menu orizzontali o verticali, vengono costruiti utilizzando le unordered list, cioè ul. La funzionalità dropdown invece viene creata combinando la pseudoclasse hover assieme alla proprietà visibility di liste annidate.
L'esempio seguente mostra un menu orizzontale in cui le voci si espandono verso il basso quando si posiziona il mouse sopra.

#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>

Poiché in Internet Explorer 6 la pseudoclasse hover è supportata solo dai collegamenti ipertestuali, non è possibile utilizzare i menu dropdown CSS.
Una soluzione è quella di usare un menu sempre espanso a seconda della versione del browser.

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

You are the reader number 7,148.

Comments

Previous article

Previous article

Custom Facebook tabs

Next article

How to clear the SqlDataSource cache

Next article

Scroll to top