28172 sujets

CSS et mise en forme, CSS3

Mon menu déroulant ne se decale pas

Bonjour,
Je n'arrive pas a décaler mon menu déroulant 

Voila mon code css

#menuDeroulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;/* donne la position par apport au coin de la fenêtre*/
top: 400; /* à 400px du haut du coin de la fenetre*/
left: 400;/* à 400px du gauche du coin de la fenetre*/
}


Je lui demande donc de décaler mon menu de 400px vers le haut et 400px vers la gauche

En fait j'ai pris un tut sur le net et j'essaye de voir comment ca marche en faisant des test. Mais la ne comprend pas car il devrais decaller.

je vous donne le code css entier de ma page 

body
{
 font: 11px verdana, sans-serif;
 background: #AFA99B;
 margin: 0;
 padding: 0;
}


#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

/* menu deroulant*/

#menuDeroulant
{
 width: 644px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 position: absolute;/* donne la position par apport au coin de la fenêtre*/
 top: 400; /* à 400px du haut du coin de la fenetre*/
 left: 400;/* à 400px du gauche du coin de la fenetre*/
}

#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}

#menuDeroulant li
{
 float: left;
 width: 150px;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
body
{
background-color: #FBE3DE;
}
img {
border:0;
}



#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
    #menuDeroulant li:hover > .sousMenu { display: block; }


et le code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline41.css" /> 
	   
	   </head>
 
   <body>
       <!-- fond -->
 
       <div id="rubrique">        
           <div id="menu">
		   <img src="image/emeline_rub.jpg" style="float: left">
 <ul id="menuDeroulant">
 <li>
  <a href="#">Partie 1</a>
  <ul class="sousMenu">
   <li><a href="#">castor</a></li>
   <li><a href="#">aligator</a></li>
   <li><a href="#">musclor</a></li>
  </ul>

		</li>
		
		<li>
			<a href="#">Partie 2</a>
			<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>

				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 3</a>

			<ul class="sousMenu">			      
				<li><a href="#">pommes</a></li>
				<li><a href="#">poires</a></li>
				<li><a href="#">ananas</a></li>
				<li><a href="#">pamplemousse</a></li>
				<li><a href="#">banane</a></li>				
				<li><a href="#">raisins</a></li>

				<li><a href="#">framboises</a></li>
				<li><a href="#">fraises</a></li>
				<li><a href="#">mirabelles</a></li>
				<li><a href="#">groseilles</a></li>
			</ul>
		</li>
		<li>

			<a href="#">Partie 4</a>
			<ul class="sousMenu">			      
				<li><a href="#">tomates</a></li>
				<li><a href="#">haricots</a></li>
				<li><a href="#">carrottes</a></li>
				<li><a href="#">choux</a></li>
				<li><a href="#">concombres</a></li>				
				<li><a href="#">courgettes</a></li>

				<li><a href="#">endives</a></li>
				<li><a href="#">navets</a></li>
				<li><a href="#">epinards</a></li>
				<li><a href="#">avocat</a></li>
			</ul>
		</li>
	</ul>



</div>
		   
		
		   	
   </body>
</html>


voici ma page test

http://www.sandrineetgwen.fr/emelinepresentation.html
Merci par avance
Sujet clos
Aller à