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

      Idea R - Do you have a real web strategy? Persuasion Technologies
  • 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
Go to the blog summaryGo to the blog summary

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

[Free eBook] 50+ tips for getting first on search engines and overtake the competition

[Free eBook] 50+ tips for getting first on search engines and overtake the competition

Do not miss this free ebook. Take advantage of a plurennial SEO experience and get tons of new visitors by improving your website optimization.
Metalworking industry: how to multiply customers using only the website and zero advertising budget

Metalworking industry: how to multiply customers using only the website and zero advertising budget

Find out how to design a website for the metalworking industry, that will be a magnet for customers and able to triple your leads.

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.
newsletter

Stay informed on digital strategies

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 6,941.

Comments

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

Scroll to top