In questo codice ho realizzato in versione super semplificata una barra dropdown usando solo i CSS


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barra Navigazione Drop Down</title>
<style type="text/css">
 
/*
barra navigazione drop down
super semplificata
(primo esempio)
uso didattico
25022011
u.romano  @ugorom
*/
* {
    margin: 0px;
    padding: 0px;
}
 
#navbar ul {
 
    list-style-type: none;
 
}
#navbar li {
    float: left;
    width: 12em;
    text-align: center;
}
#navbar a {
    text-decoration: none;
    line-height: 2em;
    color: #333;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #ddd;
    display: block;
    border: 1px dotted #999;
}
#navbar a:hover {
    color: #FC0;
    background-color: #036;
}
#navbar ul ul {
    position: relative;
    top: -1px;
    visibility: hidden;
}
#navbar li:hover ul {
    visibility: visible;
}
</style>
</head>
 
<body>
<div id="navbar">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">products</a>
       <ul>
        <li><a href="#">fish</a></li>
        <li><a href="#">chips</a></li>
      </ul>
    </li>
    <li><a href="#">services</a>
        <ul>
        <li><a href="#">lorem</a></li>
        <li><a href="#">ipsum</a></li>
        <li><a href="#">dolor</a></li>
      </ul>
    </li>
    <li><a href="#">contacts</a></li>
  </ul>
</div>
</body>
</html>
 

ovviamente provando questo codice si troveranno una serie di problemi: infatti i blocchi visibility:hidden sono presenti ma non visibili quindi occuperanno spazio e sposteranno i blocchi successivi nel flusso. Non solo, il roll-over sarà attivato passando su elementi invisibili e non è l'effetto che vogliamo dare.
La soluzione sarà di intervenire con la proprietà display e fare uscire i blocchi del sottomenù dal flusso con il posizionamento absolute rispetto all'elemento di lista superiore posizionato relative ma non spostato.

Il codice si complica un pochettino ma spero che rimanga comprensibile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barra Navigazione Drop Down</title>
<style type="text/css">
 
/*
barra navigazione drop down
super semplificata
uso didattico
ok  FF,Chrome, IE8
25022011
u.romano  @ugorom
*/
* {
    margin: 0px;
    padding: 0px;
}
 
#navbar ul {
 
    list-style-type: none;
 
}
#navbar li {
    float: left;
    width: 12em;
    text-align: center;
    position:relative; /* posiziono i blocchi li relativi senza spostarli, diventereanno
                              il punto di partenza per spostare i sottomenù */
}
#navbar a {
    text-decoration: none;
    line-height: 2em;
    color: #333;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #ddd;
    display: block;
    border: 1px dotted #999;
}
#navbar a:hover {
    color: #FC0;
    background-color: #036;
}
#navbar ul ul {
    position: absolute;
    top: 2em; /* Sposto i sottomenù verso il basso */
    display:none;
}
#navbar li:hover ul {
    display: block; /*mostro i sottomenù solo se sugli elementi li passa il mouse */
}
</style>
</head>
 
<body>
<div id="navbar">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">products</a>
       <ul>
        <li><a href="#">fish</a></li>
        <li><a href="#">chips</a></li>
      </ul>
    </li>
    <li><a href="#">services</a>
        <ul>
        <li><a href="#">lorem</a></li>
        <li><a href="#">ipsum</a></li>
        <li><a href="#">dolor</a></li>
      </ul>
    </li>
    <li><a href="#">contacts</a></li>
  </ul>
</div>
<div style="clear:both">
<p>
lorem ipsum dolor sit amet
</p>
</div>
 
</body>
</html>
 

Anteprima

barra-drop-down-1.jpg


File completo