Aller au menu - Aller au contenu

Alignement bloc sous-menu css sur lien parent

li ul

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
2 visiteurs sur ce sujet (2 anonymes)
Page 1 
Hors ligne jbouv55151 # Posté le 22/02/2012 à 11:24:54
Avatar
Salut à tous,
Depuis longtemps je cherche une solution pour définir l'alignement du bloc de mon sous-menu à droite de mon lien supérieur, mais je n'y arrive pas.

Démonstration en images.
Ce que j'ai
Image utilisateur

Ce que j'aimerais : aligner le bloc de sous menu (ul li ul) sur le bord droit de mon lien supérieur (ul li)
Image utilisateur

L'id de mon menu est menu_top
Quelques extraits de

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#menu_top li, #menu_top ul.li {
	float: right;
	}

#menu_top ul li ul {	
	display:none;
	background: #FFFFFF;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	box-shadow: 0px 2px 2px #CCCCCC;
	}
#menu_top ul li:hover ul {
	display:block;
	}

#menu_top li ul {
	width: 160px;
	border: 1px 1px 1px 0px solid #CCCCCC;
	box-shadow: 0px 1px 2px #CCCCCC;
	position:absolute;
	float: right;
	}


Sauriez-vous comment effectuer cet alignement en CSS ?
Édité le 22/02/2012 à 11:25:39 par jbouv55151
Débutant en PHP/MySQL
 
Publicité # Posté le 22/02/2012 à 11:24:54

Hors ligne ronamazona # Posté le 22/02/2012 à 11:47:38
Pseudo classe, non ? ^^
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Salut,

je n'ai pas testé mais je dirais :
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#menu_top li, #menu_top ul.li {
	float: right;
        position:relative; /* modif ici */
	}
#menu_top li ul {
        right:0;  /* modif ici */
	width: 160px;
	border: 1px 1px 1px 0px solid #CCCCCC;
	box-shadow: 0px 1px 2px #CCCCCC;
	position:absolute;
	float: right;
	}

Si ça fonctionne tu dois pouvoir enlever float:right à ton ul de sous-menu.
Mon site test CSS3/HTML5 : www.frogweb.fr
Vous cherchez à faire un Menu déroulant ?
Image utilisateur Votre problème est résolu ? Cliquez sur le bouton résolu.
Image utilisateur Cliquez aussi sur le message qui vous a aidé pour que les autres trouvent facilement la réponse.
 
Hors ligne jbouv55151 # Posté le 22/02/2012 à 11:55:02
Avatar
Citation : ronamazona
Salut,

je n'ai pas testé mais je dirais :
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#menu_top li, #menu_top ul.li {
	float: right;
        position:relative; /* modif ici */
	}
#menu_top li ul {
        right:0;  /* modif ici */
	width: 160px;
	border: 1px 1px 1px 0px solid #CCCCCC;
	box-shadow: 0px 1px 2px #CCCCCC;
	position:absolute;
	float: right;
	}

Si ça fonctionne tu dois pouvoir enlever float:right à ton ul de sous-menu.


Bravo !
Ça marche nickel, j'ai juste mis une valeur négative à "right" pour compenser le padding de mon lien parent je pense.
Débutant en PHP/MySQL
 

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx