Menu horizontal déroulant HTML/CSS [Résolu/Fermé]

Signaler
Messages postés
22
Date d'inscription
vendredi 19 mars 2010
Statut
Membre
Dernière intervention
13 janvier 2013
-
Messages postés
22
Date d'inscription
vendredi 19 mars 2010
Statut
Membre
Dernière intervention
13 janvier 2013
-
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:

<html>
<head>
		<link rel="stylesheet" href="./css.css" type="text/css" media="screen"/>
		<script type="text/javascript">
<!--
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);

-->
</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:

#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;
}


Alors 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:

#mainNav1 li:hover li ul,
#mainNav1 li.sfhover li ul
{
        left: auto;
        min-height: 0;
}


Merci d'avance pour votre aide!



2 réponses

Messages postés
22
Date d'inscription
vendredi 19 mars 2010
Statut
Membre
Dernière intervention
13 janvier 2013
1
Petite relance, personne n'a d'idée?
Bonsoir,
Ben déjà dans la fonction javascript, tu attribues un ID qui a pour nom "menu" mais qui n'existe pas dans ton code HTML :
var sfEls = document.getElementById("menu").getElementsByTagName("LI");

Dans ton code HTML, l'ID se nomme "mainNav1" ou "mainNav2".
Messages postés
22
Date d'inscription
vendredi 19 mars 2010
Statut
Membre
Dernière intervention
13 janvier 2013
1
Oui c'est juste une erreur de copier coller dsl... Même avec un des deux ID mon problème est le même.
Messages postés
22
Date d'inscription
vendredi 19 mars 2010
Statut
Membre
Dernière intervention
13 janvier 2013
1
Toujours pas de solutions? :(