28172 sujets

CSS et mise en forme, CSS3

Problème d'alignement menu déroulant

Bonjour,

J'ai un petit problème d'alignement dans un menu déroulant vertical.

Je souhaite que la première ligne (niveau1) soit alignée à droite, tandis que le reste sera aligné à gauche, mais impossible d'obtenir ce résultat, pourriez-vous m'aider svp?

Actuellement;
MENU
SOUS-MENU1
SOUS-MENU2

Alors que j'aimerais:
MENU
SOUS-MENU1
SOUS-MENU2

Voici le code:

<STYLE type=text/css>#monmenu {
  FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: Roboto;
}
#monmenu UL UL {
        box-shadow: 8px 8px 12px #555; 
        BORDER: none; 
        DISPLAY: none; PADDING: 0px; 
        MARGIN: 0px; POSITION: absolute;
}
#monmenu LI {
        PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 300px; HEIGHT: 25px;
        PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #fff; VERTICAL-ALIGN: MIDDLE;
        BORDER-BOTTOM: 1px solid #fff;   PADDING-LEFT:20px; float: right;
}
#monmenu LI UL.niveau2 {
        float: LEFT;
}
#monmenu LI:hover {
  BACKGROUND-COLOR: #fff;  
        BORDER-BOTTOM: 1px solid #2D241E; 
}
#monmenu LI.sfhover {
  BACKGROUND-COLOR: #fff
}
#monmenu LI A {
  TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 {
  DISPLAY: block
}
#monmenu LI LI:hover UL.niveau3 {
        TEXT-ALIGN: left;
  DISPLAY: block
}
#monmenu LI.sfhover UL.niveau2 {
  DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 {
  DISPLAY: block
}
#monmenu LI.plus {
  BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url('images/new_simul.png'); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
}
</STYLE>

<DIV id=monmenu style="display: inline-block; float: right;">
<UL class=niveau1 style="display: inline-block; float: right;">
  <LI style="text-align: left;"><img src="images/options.png"> &nbsp;Options</a>
  <UL class=niveau2 style="LEFT: 0px; TOP: 29px">
    <LI><a href="" >Sous-menu</a></LI>
    <LI><A href=""><IMG alt=" " 
    src="plat.gif" align=top border=none> 
    Menu1</A> </LI>
    <LI><A href="fr.php"><IMG alt=" " 
    src="image2.gif" align=top border=none> 
    Menu2</A> </LI></UL></LI></UL></DIV>


Merci pour votre aide !
Effectivement les espaces ont été supprimer ce qui rend mon exemple difficile à comprendre.

En fait je souhaite que mon "MENU" soit aligné à droite, puis que les "SOUS-MENU" soient alignés à gauche.
Bonjour,

Je vois bien un truc du genre :
#monmenu > ul > li {
  text-align: right;
}
#monmenu > ul > li ul {
  text-align:left;
}

Moi ce qui m'a piquer les yeux, c'est le css en inline dans l'html. Smiley langue
Sujet clos
Aller à