basicssVediamo ora come realizzare un menù a tendina come quello di questo sito utilizzando semplicemente codice Css e HTML senza ricorrere quindi a Javascript o JQuery.

Ovviamente è un codice base da personalizzare liberamente,partiamo quindi con il codice html:

<!doctype html>
<html>
<head><link href=”menù.css” rel=”stylesheet” type=”text/css”></head>
<div class=”des” id=”menu”>
<ul>
<li><a href=”#” >Home</a>
<ul>
<li><a href=”#”>Prova1</a></li>
<li><a href=”#”>Prova2</a></li>
<li><a href=”#”>Prova3</a></li>
</ul>
</li>
<li><a href=”#”>Chi Siamo</a>
<ul>
<li><a href=”#”>Prova1</a></li>
<li><a href=”#”>Prova2</a></li>
</ul>
</li>
<li><a href=”#”>Progetti</a>
<ul>
<li><a href=”#”>Prova1</a></li>
<li><a href=”#”>Prova2</a></li>
<li><a href=”#”>Prova3</a></li>
<li><a href=”#”>Prova4</a></li>
</ul>
</li>
</ul>
</div></html>

Vediamo dunque che il file fa riferimento a “menù.css” ovvero il foglio di stile che si occupa di formattare tutti gli attributi che abbiamo usato in precedenza nel codice html,il codice seguente è liberamente modificabile per cambiare lo stile e i colori del menù finale:
div#menu
{
width: 30%;
float: center;
margin:0;
padding: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white;
color: #efefef;
margin: 20px auto;
padding-bottom:2%;
padding-left: 1%;
padding-right: 0%;
padding-top:5px;
display: inline-block
border: 20px solid #E63302;
border-radius:40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;

}

div#menu ul
{

list-style-type: none;
}

div#menu li
{
width:100px;
float:left;
margin: 0;
padding: 0;
padding-right: 8px;
padding-bottom: 10%;
margin-left: 2%;
margin-right:10%;
margin-bottom:10px;

color:black;
}
div#menu a
{
background-color: white;
color: #efefef;
margin: 20px auto;
padding: 20px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding: 0px;
padding-right:0px;
color: #000;
text-decoration: none;
font-weight: 700;
font-size: 20px;
}

div#menu a:hover
{
background-color: #000;
color: #FFFFFF;
text-decoration: none;
}

div#menu li ul { display: none }

div#menu li:hover ul
{
position: absolute;
display: block;
z-index:1;
width:100px;
padding: 0;
margin: 0 0 0 -1px;
margin-top:15px;
}