[RÉGLÉ] Changer orientation des sous menus

[julianito]

Bjr à tous,

j'aimerais que mes sous menus s'affichent sur la droite de mon titre de menu principal, alors que là par défaut il se place en dessous. Placez votre souris sur "Nos réalisations" ou "BBC" :

http://www.maisons-roales-caillot.com/index.php/fr/bbc/notre-bbc

Je vous mets le css du module menu, mais étant novice je n'ose changer quoique ce soit :

ul#main_menu {
margin:0;
padding: 0;
/** change **/
}
#main_menu li {
margin: 0 ;
padding:0;
position:relative;
list-style : none;
display : block;
/** change **/
border-bottom: 1px solid #fff;
width:200px;
}
#main_menu li:hover, #main_menu li.active {
background: transparent url(../images/white-20.png) 0 0 repeat;
}
#main_menu li ul {
position:absolute;
z-index:1000;
left: -999em;
margin: 0px;
padding : 0;
display : block;
/** change **/
padding: 0px 0;
}
#main_menu li ul ul {
/** change **/
margin: 0px 0 0 195px;
}
#main_menu li li {
clear:both;
/** change **/
width:auto;
}
#main_menu li li a, #main_menu li li span.separator{
text-transform:none;
display: block;
}
#main_menu li:hover ul ul, #main_menu li:hover ul ul ul,
#main_menu li.sfhover ul ul, #main_menu li.sfhover ul ul ul {
left: -999em;
}
#main_menu li:hover ul, #main_menu li li:hover ul, #main_menu li li li:hover ul,
#main_menu li.sfhover ul, #main_menu li li.sfhover ul, #main_menu li li li.sfhover ul {
left: auto;
}
#main_menu li a, #main_menu li span.separator {
padding:0;
display : block;
position : relative;
/** change **/
background: url(../images/puce-main-menu.png) 4px 18px no-repeat;
color:#fff;
font-size:18px;
text-align:left;
text-transform: none;
font-weight: normal;
line-height:18px;
margin:0;
padding: 11px 12px 11px 16px;
text-decoration:none;
}
#main_menu li span.separator {
cursor:default;
}
#main_menu li a:hover, #main_menu li span.separator:hover {
}
#main_menu li a span {
}
#main_menu li li a, #main_menu li li span.separator {
padding:0;
width : 140px;
display : block;
position : relative;
/** change **/
background: #f1f1dc url(../images/black-10.png) top left repeat;
color:#46462b;
font-size:18px;
text-align:left;
text-transform: none;
font-weight: normal;
line-height:18px;
margin-left:5px;
padding: 11px 12px 11px 11px;
text-decoration:none;
-moz-box-shadow: 2px 2px 5px #666;
-webkit-box-shadow : 2px 2px 5px #666;
box-shadow : 2px 2px 5px #666;
}
#main_menu li li li a, #main_menu li li li span.separator {
width : 140px;
padding: 11px 10px 11px 12px;
margin-left:2px;
}
#main_menu li a, #main_menu li span.separator {
color:#fff;
}
/** si parent actif et enfant actif **/
#main_menu li.active li a:hover, #main_menu li li.active li a:hover, #main_menu li li li.active li a:hover,
#main_menu li.active li span.separator:hover, #main_menu li li.active li span.separator:hover, #main_menu li li li.active li span.separator:hover {
color:#ff6600;
}
/** si est parent actif level 2+ **/
#main_menu li li.active a, #main_menu li li li.active a, #main_menu li li li li.active a,
#main_menu li.active li.active a, #main_menu li li.active li.active a, #main_menu li li li.active li.active a,
#main_menu li li.active span.separator, #main_menu li li li.active span.separator, #main_menu li li li li.active span.separator {
color:#ff6600;
}
/** si est parent actif level 1 **/
#main_menu li.active a, #main_menu li.active span.separator {
color:#fff;
}
/** si est parent actif et enfant non actif **/
#main_menu li.active li a, #main_menu li.active li span.separator {
color:#46462b;
}
/** si est survol level 2+ **/
#main_menu li li a:hover, #main_menu li li li a:hover,
#main_menu li.active li a:hover, #main_menu li li.active li a:hover, #main_menu li li li.active li a:hover,
#main_menu li.active li.active a:hover, #main_menu li li.active li.active a:hover, #main_menu li li li.active li.active a:hover {
color:#ff6600;
}
/** si est survol level 1 **/
#main_menu li a:hover, #main_menu li span.separator:hover {
color:#fff;
text-decoration: none;
}
/** si courant 2+ survol **/
#main_menu li li a:hover, #main_menu li li span.separator:hover {
color:#ff6600;
}
/** si est enfant **/
#main_menu li li a, #main_menu li li li a, #main_menu li li li li a {
color:#46462b;
}
/** si est parent level 1 **/
#main_menu li a {
color:#fff;
}
/** si est parent level 2+ **/
#main_menu li li a, #main_menu li li li a, #main_menu li li li li a {
color:#46462b;
}
/** si parent actif et enfant non actif **/
#main_menu li.active li a, #main_menu li li.active li a, #main_menu li li li.active li a {
color:#46462b;
}
#main_menu li.active li a, #main_menu li li.active li a, #main_menu li li li.active li a {
color:#46462b;
}
#main_menu li#current li a {
color:#46462b;
}
#main_menu #current li a {
color:#46462b;
}
#main_menu #current li a, #main_menu #current li li a,
#main_menu li.active li li a, #main_menu li li.active li li a, #main_menu li li li.active li li a,
#main_menu li.active li.active li a, #main_menu li li.active li.active li a, #main_menu li li li.active li.active li a {
color:#46462b;
}

[lomart]

Re : Changer orientation des sous menus

Dans le fichier /templates/joomspirit_60/css/moomenuv.css, ligne 19
supprimer la ligne en rouge et ajouter en ajustant la valeur la ligne en vert

#main_menu li ul {
display: block;
left: -999em;
margin: 0;
margin-left: 150px;
padding: 0;
position: absolute;
z-index: 1000;
}

Pour remonter le sous-menu, on peut aussi ajouter
margin-top: -30px;

[julianito]

Re : Changer orientation des sous menus

ah super, merci!

Une dernière petite question, serait il possible d'agrandir le cadre du sous menu?

[julianito]

Re : Changer orientation des sous menus

c bon, j'ai réussi à changer la largeur! Merci pour tout!