A la demande populaire, voici comment créer facilement un menu horizontal :

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
#menu { 
        margin: ; 
        padding: ; 
        list-style: none; 
      } 
#menu li { 
        display: inline; /* affichage horizontal */ 
      } 
#menu li a { 
        padding: 5px 20px; 
        margin: ; 
        background: #98B924; 
        color: #fff; 
        border: 1px solid #89a; 
        text-decoration: none; 
        -moz-border-radius: 10px 10px  ; 
        -webkit-border-radius: 10px 10px  ; 
        border-radius: 10px 10px  ;         
        -webkit-border-top-left-radius: 10px; /* pour Chrome */ 
        -webkit-border-top-right-radius: 10px; /* pour Chrome */ 
 
      } 
#menu li a:hover, #menu li a:focus { /* Au passage de la souris...
        background: #b8da40; /* ...l'arriere-plan change de couleur et... */
        color: #000; /* les liens prennent la couleur noir */
      }
</p>

Enregistrez tout ça avec l’extension css. Dans notre exemple le fichier s’appelera style.css. Faisons un test avec une page html toute basique :

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu horizontal CSS</title>
</head>
<body>
 <h1>Menu sous forme d'onglets en CSS sans images</h1>
 <ul id="menu">
    <li><a href="#">Un</a></li>
    <li><a href=""">Deux</a></li>
    <li><a href="#">Trois</a></li>
    <li><a href="#">Quatre</a></li>
</ul>
</body>
</html>
</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

Voir la demo