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

      Idea R - Plan your visual communication at 360°
  • HomeHome
  • About UsAbout Us
  • ContactsContacts

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

You may be interested in

How to fix your ASP.NET site to be responsive on Windows Phone

How to fix your ASP.NET site to be responsive on Windows Phone

Internet Explorer 10 for Windows Phone 8 suffers a bug when displaying responsive web sites. See how to fix it server-side with few lines of code.

Centering text with CSS

Here's the correct way to center a text vertically using only CSS.

Last published

Case study: branding and marketing for a magician

Case study: branding and marketing for a magician

Singular case study in the world of illusionism. See how we have created a brand and a web marketing campaign with exceptional results.

Can engineering industry sponsor art without going off topic?

How to design a page in an exhibition catalog of Biennale in Venice, for a customer who apparently has nothing to do with art.

Most popular

Lazy loading and the SEO problem, solved!

Lazy loading and the SEO problem, solved!

The best SEO solution to index your dynamically loaded contents, no more compromises!

Case study: TAV Engineering, branding for B2B services

How to create a brand that keeps distance from the cold and aseptic image of the metal industry, focusing instead on the human aspect.

Editor's pick

Mental marketing secret #1: the fake compromise

Mental marketing secret #1: the fake compromise

Can mentalism influence marketing? As a marketing professional and a long term magician, I will reveal you some tricks.

How to dramatically increase social media LIKEs to your web site

Here's a free download that I created some time ago. It's a good tool for increasing engagement, but use with caution.
newsletter

Stay informed on digital strategies

RSS feed

Menu dropdown con CSS

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

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 4,888.

Comments

comments powered by Disqus
Creative Commons License

Photographies, videos, graphics and texts by Idea R are licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Previous article

Previous article

Custom Facebook tabs

Next article

How to clear the SqlDataSource cache

Next article
  • Visual Communication, Art DirectionVisual Communication, Art Direction
  • Apps, Cloud, Mobile, Software DesignApps, Cloud, Mobile, Software Design
  • Digital StrategiesDigital Strategies
  • BlogBlog
Touching finger
RSS feed
Blog

Scroll to top