Menu déroulant horizontal HTML/CSS

**ArnOM14** · 10/06/2012, 22h49

Bonjour,

Voici mon problème, je souhaite développer un menu déroulant horizontal pour mon site web. Mon problème est qu'au passage de la souris sur les différentes parties de mon menu, les sous-partie n'apparaissent pas.

Voici mon code HTML:

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
<html>
<head>
		<link rel="stylesheet" href="./css.css" type="text/css" media="screen"/>
		<script type="text/javascript">
<!--
sfHover = function() {
        var sfEls = document.getElementById("mainNav1").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);
 
-->
</script>
</head>
 
<body>
 
<ul id="mainNav1">
  <li><a href="/" class="current">partie 1</a></li>
  <li><a href="/page2/">partie 2</a></li>
		<li>
		<ul id="mainNav2">
			<li><a href="/page2/souspage1/">partie 2-1</a></li>
			<li><a href="/page2/souspage2/">partie 2-2</a></li>
		</ul>
		</li>
  <li><a href="/page3/">partie 3</a></li>
		<li>
		<ul id="mainNav2">
			<li><a href="/page3/souspage1/">partie 3-1</a></li>
			<li><a href="/page3/souspage2/">partie 3-2</a></li>
		</ul>
		</li>
</ul>
 
 
</body>
</html>

Et mon code 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
62
63
64
65
66
 
#mainNav1,
#mainNav1 ul   
{
        padding : 0;
        margin : 0;
        list-style : none;
        line-height : 31px;
        text-align : center;
}
 
#mainNav1,
#mainNav2
{
        font-family : Verdana;
        font-size : 13px;
        font-weight : bold;
}
 
#mainNav1 a,
#mainNav2 a
{
        display : block;
        padding : 0;
		width : 150px;
        color : #000;
        background : red;      
        text-decoration : none;
}
 
 
 
#mainNav1 li   
{ 
				float : left;
		        border-right : 1px solid #fff;
}
 
#mainNav2
{ 
        position: absolute;
        width: 150px; 
        left: -999em;
}
 
 
#mainNav2 li
{
 
        border-top : 1px solid #fff;
}
 
#mainNav1 a:hover,
#mainNav2 a:hover 
{
        color: #000;
        background: #fff;
}
 
 
#mainNav1 li:hover li ul,
#mainNav1 li.sfhover li ul
{
        left: auto;
        min-height: 0;
}

Petite précision, pour l'hébergement de mon site j'utilise 1&1 My Website et il y a certaines contraintes pour la modification de la mise en page. Je ne peux notamment pas modifier le code HTML.

Je pense que la partie qui ne vas pas dans le CSS est la suivante:

Code :

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

1
2
3
4
5
6
7
 
#mainNav1 li:hover li ul,
#mainNav1 li.sfhover li ul
{
        left: auto;
        min-height: 0;
}

Merci d'avance pour votre aide!

**Muchos** · 11/06/2012, 05h24

Voici un tuto de référence sur le menu déroulant en css.

Je ne peux notamment pas modifier le code HTML.

**ArnOM14** · 11/06/2012, 22h13

Merci Muchos.
Oui malheureusement le fait de ne pas pouvoir modifier le HTML m'em*** vraiment!

Vraiment pas de solutions?

Menu déroulant horizontal HTML/CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager