Discussion :

[tatutatu2009]

Bonjour
je suis entrain d'aider un ami alors que moi je même suis aussi débutant en html et css. J'ai suivi un tuto pour lui faire le menu déroulant mais là je dois lui faire les sous menus et je n'y arrive pas. Si quelqu'un peut m'aider svp, je veux rajouter un sous menu mathématique : algèbre et geo voilà le code sur lequel je me suis basé (voilà le resultat en image http://img15.hostingpics.net/pics/406729photo.jpg)
Merci et bon weekend à tous

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="navigation">
        <ul>
          <li><a href="http://index.php">Accueil</a></li>
         <li><a href="http://livres.php">Livres</a></li>
          <li><a href="#">Cours</a>
            <ul>
              <li><a href="">Mathématique</a></li>  
<ul>
		      <li><a href="">Algèbre</a></li>
		      <li><a href="">Geo</a></li>
		  </ul>       
              <li><a href="">Science</a></li>
              <li><a href="">francais</a></li>
              <li><a href="">anglais</a></li>
 
            </ul>
          </li>
          <li class="last-nav"><a href="">contact</a></li>
 
        </ul>
      </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.navigation {
 float:right;
 width:725px;
 padding-top:20px;
}
.navigation ul{
 float: right;
 margin:0;
 padding:0;}
.navigation ul li {
 display:inline-block;
 padding: 0px 10px}
.last-nav  {
 padding:0 0 0 15px !important}
 
.navigation ul li a{
 position:relative;
 z-index:8;
 font-family:'Federo', arial;
 color:#fd3cc0;
 text-decoration:none;
 font-size:15px;
 padding:0 5px 7px 2px;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}
.navigation ul li ul li a{ font-family:Arial, Helvetica, sans-serif; line-height:25px; font-size:14px;}
.navigation ul li ul {
 float:left;
 margin-top:7px;
 padding:10px;
 background: rgba(255, 255, 255, 0.9);
 position:absolute;
 z-index:6;
 width:165px;
 display:none}
 
 .navigation li ul li a:hover {
  text-decoration:underline;
 }
.navigation li ul li a:hover {
 color: #fd3cc0;
 border:none;}
.navigation ul li:hover  ul {
 display:block}
 
.navigation ul li a:hover ul  {
 display:block}
.navigation a:hover{
 border-bottom:3px solid #fd3cc0;
 transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;}

[NoSmoking]

Bonjou,
il te faut commencer par écrire un code HTML valide.

Voici une imbrication conforme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>