Voici une solution pour faire un menu déroulant simplement en utilisant uniquement HTML et CSS.

Exemple de menu déroulant

Vous avez le CSS et le HTML, à vous de l’adapter à vos besoins en modifiant ce qu’il vous faut.

#menu{
    height: 21px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
}
#menu li{
    float: left;
    text-align:center;
    width: 150px;
    margin: 0;
    padding: 0;
    border: 0;
}
#menu li a:link, #menu li a:visited{
    display: block;
    height: 1%;
    color: #FFF;
    background: green;
    margin: 0;
    padding: 4px 8px;
    border-right: 1px solid #fff;
    text-decoration: none;
}
#menu li a:hover {background-color: #F2462E;}
#menu li a:active {background-color: #5F879D;}
#menu .sousMenu{
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#menu .sousMenu li{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 149px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
}
#menu .sousMenu li a:link, #menu .sousMenu li a:visited{
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
}
#menu .sousMenu li a:hover{
    background-image: none;
    background-color: #F2462E;
}
#menu li:hover > .sousMenu {display: block;}

<ul id="menu">
	<li><a href="#">Fruits</a>
            <ul class="sousMenu">
                    <li><a href="#">Pomme</a></li>
                    <li><a href="#">Orange</a></li>
                    <li><a href="#">Banane</a></li>
                    <li><a href="#">Figue</a></li>
            </ul>
        </li>
	<li><a href="#">Sports</a>
            <ul class="sousMenu">
                    <li><a href="#">Basket</a></li>
                    <li><a href="#">Roller Derby</a></li>
                    <li><a href="#">Tennis</a></li>
            </ul>
        </li>
	<li><a href="#">Capitales</a>
            <ul class="sousMenu">
                    <li><a href="#">Paris</a></li>
                    <li><a href="#">Londres</a></li>
            </ul>
        </li>
	<li><a href="#">Prénoms</a>
            <ul class="sousMenu">
                    <li><a href="#">Emilie</a></li>
                    <li><a href="#">Pierre</a></li>
                    <li><a href="#">Lionel</a></li>
                    <li><a href="#">Virginie</a></li>
                    <li><a href="#">Sebastien</a></li>
            </ul>
        </li>
</ul>

WebKit est un projet open source permettant aux développeurs d’améliorer le rendu de page web. C’est une bibliothèque que chaque navigateur interprète à sa façon.

On notera que pour les principaux navigateurs, on ajoutera un préfixe à nos propriétés CSS, à savoir:

• -moz- pour Firefox (Gecko)
• -o- pour Opera
• -webkit- pour Safari et Chrome
• -ms- pour Internet Explorer

Webkit : Liste de propriété avec exemple

• Border Radius (Pour arrondir les angles)

  Exemple pour ajouter des bords arrondis sur un div, une images, …

  img{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} Ici, les angles sont arrondis avec un « radius » de 10px.

• Transition avec opacité (Jouer sur l’opacité)

  Comment faire disparaître ou apparaître une image lors du passage de la souris.

  img{ opacity: 1; -webkit-transition: opacity 1s linear;} img:hover { opacity: 0;} Ici, la transition se fait en jouant sur l’opacité de l’image.

• Transition avec rotation (Faire tourner une images, div, …)

  Faire tourner une image en passant la souris.

  img{ webkit-transform: rotate(0deg); -webkit-transition: all 0.5s ease-in-out;} img:hover { -webkit-transform: rotate(180deg); -webkit-transition: all 0.5s ease-in-out;} Ici, la transition se fait en jouant sur l’opacité de l’image.

Voici quelques liens pratiques pour voir d’autres propriétés.

• CSS Infos
• Outil pour les ‘border radius’

Voici le résumé d’un article trouvé sur Vanseodesign.com.

L’idée principale est de remplacer les balises classiques des tableaux html (table, tr, td, …) par des balises div ou span.

1/ La correspondance de balises utilisées pour des tableaux avec la propriété css

table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }

2/ Le même tableau (3 par 3) sous 2 versions différentes

• Avec les balises table, tr, td

<table>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

• Avec les balises div et span avec le css correspondant

<div id="table">
   <div class="row">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
   </div>
   <div class="row">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
   </div>
   <div class="row">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
   </div>
</div>

#table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;}

Voili voilou, j’espère que ça va vous aider !