18041 sujets

Questions générales et questions de débutants

Menu déroulant

Bonjour,

J'essaie de mettre en place un menu déroulant sur mon site mais je n'arrive pas à conserver la mise en forme de base de mon site.

Voici le CSS de base :

#side {
width : 196px ;
float  : left ;
padding :  0  ;
text-align : justify;  
}
	
#side h2 {
font-size : 1em ;
margin : 0  ;
padding :  0 0 0 10px ; 
color : #000 ; 
background : url(images/kit/side-h2.jpg);
height : 35px;
line-height : 35px;
text-transform : uppercase;
font-weight : normal;
}

#side h2 a{
text-decoration : none ; 
color : #000;   
}

#side h2 a:hover{
color : #3F3F3F ;
}
	
#side ul{
list-style : none ; 
margin : 5px 0 15px 0 ; 
padding : 0; 
color : #000
}
 
#side li{
margin : 0 ; 
padding : 0 0 5px 0;
border-top : 1px solid #ccc;  
}
  
#side li a{
padding : 0 0 0 20px; 
 display : block ;
height : 25px;
line-height : 25px; 
text-decoration : none ; 
color : #000;   
}

#side li:first-child {
border-top: 0; 
}

#side li a:hover{
color : #3F3F3F ;
}

#side p{
margin : 10px 0 25px 0 ; 
padding : 0;  
}

#side form {
margin : 0;
padding : 20px 0 0 0;
height : 50px;  
}

#side input {
float : left ; 
margin : 0;
padding : 0; 
}

#side .champ {
width : 115px ;
height : 23px;
border-top  : 1px solid #E2E2E2;
border-left  : 1px solid #E2E2E2;
border-bottom  : 1px solid #E2E2E2;
border-right : 0;   
}

#side .recherche {
background : url(images/search.jpg);
height : 25px;
width : 67px;
border : 0; 
}


et celui du menu déroulant :

#monmenu {
width : 196px ;
float  : left ;
padding :  0  ;
text-align : justify;  
}

#monmenu h2 {
font-size : 1em ;
margin : 0  ;
padding :  0 0 0 10px ; 
color : #000 ; 
background : url(images/kit/side-h2.jpg);
height : 35px;
line-height : 35px;
text-transform : uppercase;
font-weight : normal;
}

#monmenu ul ul {
color:#3F3F3F;
display: none;
left: 144px;
top: -1px;
position: absolute;
margin : 5px 0 15px 0;
padding: 0;
}

#monmenu li {list-style-type: none; position: relative; width: 140px; padding: 2px; margin: 0px}

#monmenu li:hover, #monmenu li.sfhover {color: #3F3F3F;}

#monmenu li a {text-decoration:none;}

#monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}

#monmenu li.plus {background-position:right; background-repeat: no-repeat; border-bottom: 1px solid #3F3F3F;}


Pouvez-vous m'aider ?

merci d'avance
Modifié par Romdavid54 (18 Mar 2011 - 10:53)
le voici Smiley cligne 

  <div id="monmenu">
	<h2>Prizee classique</h2>
        <ul class="niveau1">
           <li> Liste des jeux
               <ul class="niveau2">
                 
                  <li>
                    <a href= "/jeu1.php">
                     
                        Jeu 1
                    </a>
                  </li>
                  <li>
                    <a href= "/jeu3.php">
                     
                        jeu 2
                    </a>
                  </li>
                  <li>
                     <a href= "/jeu2.php">
                     
                        Jeu 3
                     </a>
                   </li>
                   <li>
                      <a href= "/jeu1.php">
                                Jeu 4
                      </a>
                   </li>
                </ul>
              </li>
        </ul>
    </div>
Bonjour Romdavid54,

Ce que Mabelle voulait dire, c'est le html de toute la page, pas uniquement celui du menu. Smiley rolleyes 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Actu prizee</title>
<meta name="Description" content="Description courte de votre activité" />
<meta name="Keywords" content="1 ou deux mots clés" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<!--[if lte IE 6]> 
<link rel="stylesheet" type="text/css" href="/ie-6.css" /> 
<![endif]--> 

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-3312873-4']);
  _gaq.push(['_setDomainName', '.actuprizee.fr']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>

<body>

<div id="site">

<div id="header">

<h1><a href="/index.php">Actu Prizee</a></h1>

<div id="menu">
<ul>
<li><a href="/index.php">Accueil</a></li>
<li><a href="/prizee_classique/index.php">Prizee classique</a></li>
<li><a href="/autres_jeux/index.php">Autres jeux</a></li>
<li><a href="http://forum.actuprizee.fr">Forum</a></li>
<li><a href="/contact.php">Contact</a></li>

</ul>
</div>
</div>

<div id="pub">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-7408280458442017";
/* Site */
google_ad_slot = "7911145087";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div align="center"><form action="login.php" method="post">
Votre login : <input type="text" name="login">
Votre mot de passe : <input type="password" name="pwd">
<input type="submit" value="Connexion">

</form><a href="/inscription.php">Créer un compte</a>
<br /></div>
<div id="main">
<div id="centrage">

	<head>
            <!--[if lt IE 7]>
        <script type="text/javascript">
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
            sfHover = function() {
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
                for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                        this.className += " sfhover";
                    }
                    sfEls[i].onmouseout = function() {
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
                    }
                }
            }
            if (window.attachEvent) window.attachEvent("onload", sfHover);
        </script>
        <style type="text/css">
            #monmenu li {width: 144px;}
        </style>
     <![endif]-->
 
  </head>
  <body>
    <div id="monmenu">
	<h2>Prizee classique</h2>

        <ul class="niveau1">
           <li> Liste des jeux
               <ul class="niveau2">
                 
                  <li>
                    <a href= "/jeu1.php">
                     
                        Jeu 1
                    </a>
                  </li>
                  <li>

                    <a href= "/jeu3.php">
                     
                        jeu 2
                    </a>
                  </li>
                  <li>
                     <a href= "/jeu2.php">
                     
                        Jeu 3
                     </a>
                   </li>
                   <li>

                      <a href= "/jeu1.php">
                                Jeu 4
                      </a>
                   </li>
                </ul>
              </li>
        </ul>
    </div>
  </body><div id="contenu">

<div class="post">

<h2>Prizee classique</h2>
<p class="sous-h2">www.prizee.com</p>

<p><img src="../images/prizee.jpg"  alt="Prizee" title="Prizee" />Naviguez dans les différentes rubriques à l'aide du menu ci-contre.

Retrouvez l'ensemble des jeux d'Adresse et de Réflexion, jeux de Chance, Adrénaline et toutes les infos sur le célèbre site de jeu Prizee.
<br /><br /><br />
Si vous avez besoin d'aide, n'hésitez pas à nous contacter par mail ou poser votre question sur notre forum.
<br /><br /><br />Bonne viste !</p>
</div>
</div>

</div>

</div>

<div id="footer">

<p><a href="../index.php">Actu Prizee</a> | Design 2008 by <a href="http://www.zwatla.com/">Zwatla</a> <a href="http://www.zwatla.com/kits_graphiques.html">kits graphiques</a></p>

</div></div>



</body>

</html>


Merci d'avance[/i][/i]
Tu as deux fois la balise <head> et <body> ??? Smiley eek

Il faut que tu revois la structure du code html avant d'essayer de corriger des bugs...
Sujet clos
Aller à