Mon menu deroulant ne se decalle pas

Résolu
gaya_102 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   -  
gaya_102 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   -
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 html de ma page

<!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>

et voici tout mon code css

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

voici ma page test

http://www.sandrineetgwen.fr/emelinepresentation.html
Merci par avance
A voir également:

3 réponses

Réponse 1 / 3
Archeus01 Messages postés 1572 Date d'inscription   Statut Membre Dernière intervention   452
 
#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: 400px; /* à 400px du haut du coin de la fenetre*/
left: 400px;/* à 400px du gauche du coin de la fenetre*/
}

Met l'unité, ça marche mieux (testé et approuvé by moi...)
0
Réponse 2 / 3
gaya_102 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
ok je vais tester
0
Archeus01 Messages postés 1572 Date d'inscription   Statut Membre Dernière intervention   452
 
Par unité, j'entends le px après les 400.
0
Réponse 3 / 3
gaya_102 Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
merci c'est rectifié et ça marche
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses