Menu déroulant vertical

**tayyab1991** · 04/03/2013, 15h07

Bonjour,
Je suis entrain de faire un site et sur le site je veut mettre un menu déroulant vertical. Au passage de la souris sur les menus les sous menus doivent apparître mais les sous menus appraîssent même quand la souris passe devant les menus.
Deuxièment les sous menus sont décalés verticalement vers le bas.

Pourriez vous m'aider à résoudre ce problème?

Cordialement.
Voici le code source :

menu.php:

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
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
<!DOCTYPE html>
<html lang="fr">
 
   <head>
    <script type="text/javascript" src="menu.js"></script>
    <meta charset="UTF-8">
        <link rel="stylesheet" href="menu.css" />  <!-- Fichier CSS -->
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <title>Web Site</title>
   </head>
 
  <body>
 
    <ul id="menu">
 
      <li>
        <a href="index.php"><p>Menu1</p></a>
      </li>
 
      <li>
        <a href="ordinateur.php"><p>Menu2</p></a>
        <ul>
          <li><a href="#"><p>Sous menu 2.1</p></a></li>
          <li><a href="#"><p>Sous menu 2.2</p></a></li>
          <li><a href="#"><p>Sous menu 2.3</p></a></li>
        </ul>
      </li>
 
      <li>
        <a href="ordinateur.html"><p>Menu3</p></a>
        <ul>
          <li><a href="#"><p>Sous menu 3.1</p></a></li>
          <li><a href="#"><p>Sous menu 3.2</p></a></li>
        </ul>
      </li>
 
      <li>
        <a href="ordinateur.html"><p>Menu4</p></a>
        <ul>
          <li><a href="#"><p>Sous menu 4.1</p></a></li>
          <li><a href="#"><p>Sous menu 4.2</p></a></li>
        </ul>
      </li>
 
    </ul>
 
  </body>
</html>

menu.css

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
58
59
60
61
#menu{
	position: relative;
	display: inline;
	top: 10px;
	font-weight: bolder;
 
}
 
#menu li a{
	position: relative;
	display: inline-block;
	line-height: 25px;
	width: 110px ;
	text-align: center;
	vertical-align: middle;
	color: black;
	font-size: 18px;
	text-decoration: none;
	background-color: silver;
	box-shadow:1px 1px 3px black;
	border-radius: 10px;
	margin: 0.1em;
}
 
#menu a:hover{
	line-height: 30px;
	width: 120px;
	vertical-align: middle;
	color: white;
	background-color: black;
}
 
#menu li ul a{
	line-height: 25px;
	width: 200px;
}
 
#menu li ul a:hover{
	line-height: 30px;
	width: 220px;
	vertical-align: middle;
	color: white;
	background-color: black;
}
 
#menu li ul /* Sous-listes */
{
        list-style: none;
        position: absolute; /* Position absolue */
        left: 100em; /* Hop, on envoie loin du champ de vision */
        visibility: hidden;
}
 
 
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
		visibility: visible;
        left: 100px; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

menu.js:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

**rodolphebrd** · 04/03/2013, 15h11

Bonjour,

Voici un petit exemple dans la section tutoriel en full css

Sinon sur le web vous en avez des tonnes.

**tayyab1991** · 04/03/2013, 15h29

Merci. J'ai réussi à résoudre le problème de décalage mais j'arrive pas à dire que les sous menus ne s'affiche uniquement quand la souris passe sur les menus.

**Zalawy** · 07/03/2013, 17h55

Bonjour,

Pourquoi vous avez mis la balise en p?

Code html :

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

<li><a href="#"><p>Sous menu 2.1</p></a></li>

Vous pouvez mettre plutôt et ça suffit :

Code html :

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

<li><a href="#">Sous menu 2.1</a></li>

**rodolphebrd** · 07/03/2013, 19h22

Voici un code minimisé au maximum pour comprendre le principe des drop-down menus.

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>Document sans nom</title>
<style type="text/css">
#menu {
        list-style:none;
}
#menu>li {
        display:inline-block;
}
#menu ul {
        list-style:none;
        position: absolute;
        top: 2em;
        left: 5em;
        display:none;
}
#menu li:hover ul{
        display:block;
}
 
</style>
</head>
<body>
<ul id="menu">
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Sed</a></li>
  <li><a href="#">Ut labore</a>
    <ul>
      <li> <a href="#">dfgdfg</a></li>
      <li><a href="#">sdfsd</a></li>
    </ul>
  </li>
  <li><a href="#">szffsff</a></li>
</ul>
</body>
</html>

**Zalawy** · 09/03/2013, 21h49

D'accord.
Je crois avoir compris ton problème. Tu as fait les menus verticaux comme prévu, puis les sous menus, mais les sous menus sont placés plus bas que les menus.
C'est cela?

Menu déroulant vertical

CSS

Discussions similaires

Partager

Partager