Menu horizontal déroulant HTML/CSS

Résolu/Fermé

ArnOM14 Messages postés 22 Date d'inscription vendredi 19 mars 2010 Statut Membre Dernière intervention 13 janvier 2013 - 10 juin 2012 à 14:24
ArnOM14 Messages postés 22 Date d'inscription vendredi 19 mars 2010 Statut Membre Dernière intervention 13 janvier 2013 - 11 juin 2012 à 22:07

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!

A voir également:

Menu déroulant horizontal html
Menu déroulant excel - Guide
Editeur html - Télécharger - HTML
Menu démarrer windows 11 - Guide
Excel menu déroulant en cascade - Guide
Canon quick menu - Télécharger - Utilitaires

2 réponses

Réponse 1 / 2

ArnOM14 Messages postés 22 Date d'inscription vendredi 19 mars 2010 Statut Membre Dernière intervention 13 janvier 2013 1
10 juin 2012 à 18:03

Petite relance, personne n'a d'idée?

ReDLoG
10 juin 2012 à 18:30

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".

ArnOM14 Messages postés 22 Date d'inscription vendredi 19 mars 2010 Statut Membre Dernière intervention 13 janvier 2013 1
10 juin 2012 à 20:12

Oui c'est juste une erreur de copier coller dsl... Même avec un des deux ID mon problème est le même.

Réponse 2 / 2

ArnOM14 Messages postés 22 Date d'inscription vendredi 19 mars 2010 Statut Membre Dernière intervention 13 janvier 2013 1
11 juin 2012 à 22:07

Toujours pas de solutions? :(

Discussions similaires

Suppression listes déroulantes

les entrées et les sortées

&nbsp ; Quelle Fonction ?

Espace en HTML

Supprimer liste déroulante Excel

Discussions similaires

Newsletters