Menu Déroulant Horizontal

sudconnect · November 16, 2012

Bonsoir.

Je poste ce message car j’essaie depuis plusieurs heure modifier un menu en css et je n'arrive pas à trouver la solution à mon problème.

Je souhaite changer la couleur d'une partie du menu :

La partie déroulée, les liens apparaissent blanc sur blanc, et je voudrais les mettre en #336993F.

Toutefois, je veux qu'ils redeviennent blanc lord du passage de la souris, car il y a un "hover" qui fait que le texte est surligné quand on la passe dessus.

J'ai essayé toutes les combinaisons (ul, li, li li, li li li, ul li...) mais rien à faire je ne trouve pas.

Le code CSS est le suivant :

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

}

.sf-menu {

margin: 10px 0;

padding:0 5px;

width:970px;/* 980 */

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

background: transparent url(../img/bg_blocktopmenu.png) repeat-x 0 0;

-moz-box-shadow: 0px 1px 2px #c6c6c6;

-webkit-box-shadow: 0px 1px 2px #c6c6c6;

box-shadow: 0px 1px 2px #c6c6c6;

}

.sf-menu ul {

position: absolute;

top: -999em;

width: 10em; /* left offset of submenus need to match (see below) */

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

background: transparent url(../img/bg_li_blocktopmenu.png) no-repeat 100% 0;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:34px;

border: 0;

text-decoration:none;

font-size: 18px;

}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/

white-space:nowrap;

}

.sf-menu li li {

background: white;

fonte-size: 16px;

fonte-color: #336993F;

}

.sf-menu li li li {

background: white;

fonte-size: 16px;

fonte-color: #336993F;

}

.sf-menu ul li {

background: white;

fonte-size: 16px;

fonte-color: #336993F;

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: transparent url(../img/bg_blocktopmenu_li_hover.png) repeat-x 0 0;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

background: #F48204;

outline: 0;

fonte-size: 16px;

fonte-color: white;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator { /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-bottom-left-radius: 17px;

-moz-border-top-right-radius: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

background: inherit;

float: right;

line-height: 25px;

}

li.sf-search input {

-moz-border-radius: 0 5px 5px 0;

padding: 3px 0;

padding-left: 20px;

margin-top: 4px;

background: #fff url(../img/search.gif) no-repeat left center;

}

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width:200px;

background:#726f72 !IE;

}

Et la structure HTML est là :

<p>

</p>

</form>

</li>

</ul>

Désolé si la structure est pas très jolie à voir mais je l'ai passée dans un logiciel qui arrange le code ligne par ligne et ca n'a rien change à ca... Si ca peut aider, c'est le menu natif de prestashop 1.5.

Je mets une image du menu :

Voyez les liens entourés en rouge je n'arrive pas à leur donner de la couleur...

Je voudrais aussi mettre tous les liens du sous-menu en 16px mais ca me fait pareil, ceux en "hover" (surlignés orange) passe en 16px au passage de la souris et pas les autres.

Mais j'ai remis les tailles initiales pour pas tout brouiller dans le css que je vous donne.

Si quelqu'un peut me sortir d'affaire ?

Ah, et est-ce qu'il y a un bon tuto pour transformer mon menu basic en menu qui affiche les articles contenus dans les catégories, de la même manière que le menu de SiteduZéro (bien agencé, propre, avec une petite image...) ?

Je vous remercie par avance pour votre attention. Bonne soirée.

Kreasite · November 16, 2012

Bonsoir,

Avec ce code #336993F ça va être difficile car en hexa c'est 6 caractères au maximum.

Cdt

btsconsult · November 16, 2012

Bonjour,

Pourquoi ne pas aller poser la question dans le forum Thèmes ils seront plus à même de répondre à ta question.

Il y a plus de spécialistes du code source que dans ce forum, qui est plus générique.

sudconnect · November 16, 2012

Bonsoir.

Kreasite - Justement il n'y en a que 6 ? A moins que le # compte comme un caractère. En tout cas je l'ai converti, en rgb ca donne :

.sf-menu li li {

background: white;

fonte-size: 16px;

fonte-color: rgb(51,105,147);

}

Mais la couleur reste toujours blanche sur le menu du site...

Btconsult - Et ca marche je vais le poster dans l'autre forum quand même.

Merci bonne soirée.

Kreasite · November 16, 2012

#336993F c'est 7 et non 6.

Sinon essayez avec un !important

.sf-menu li li {

background: white;

fonte-size: 16px;

fonte-color: rgb(51,105,147)!important

}

sudconnect · November 16, 2012

#336993F c'est 7 et non 6.

Sinon essayez avec un !important

.sf-menu li li {

background: white;

fonte-size: 16px;

fonte-color: rgb(51,105,147)!important

}

Et ouai 'fectivement Désolé.

J'ai tenté ca ne marche pas non plus.

Il y a 2 parties dans le css menu,

1 classique au départ, puis à peu près la même mais séparée par la mention

/*** DEMO SKIN ***/

Pourtant les titre ( .sf-menu ...) sont les mêmes en haut et en bas, en majorité, mais juste le contenu change.

sudconnect · November 16, 2012

#336993F c'est 7 et non 6.

Sinon essayez avec un !important

.sf-menu li li {

background: white;

fonte-size: 16px;

fonte-color: rgb(51,105,147)!important

}

Ah je viens de trouver quelque chose je crois.

inherit ?

Apparamment cela applique donc aux sous catégories les propriétés du parent.

Peut être de la viens le problème.

C'est visibility: inherit

Je fais comment pour mettre le contraire ?

Nan c'est pas ca.

Ca empêche juste que le menu initial devienne blanc (en fond) quand on descend les sous menus.

Edited November 16, 2012 by sudconnect (see edit history)

solidfr · June 29, 2013

Salut tout le monde moi cela fait 1 semaine que je m arrache la tete a bidouiller le css de prestashop 1.4.2.8 pour avoir les sous categories dans le menu du haut !!! Je sais plus quoi faire s il vous plait a l aide ou une piste !!!

Pabs · November 9, 2013

C'est font-size et pas "fonte-size".

Salut

Sign In

Menu Déroulant Horizontal

Recommended Posts

sudconnect

Link to comment

Share on other sites

Kreasite

Link to comment

Share on other sites

btsconsult

Link to comment

Share on other sites

sudconnect

Link to comment

Share on other sites

Kreasite

Link to comment

Share on other sites

sudconnect

Link to comment

Share on other sites

sudconnect

Link to comment

Share on other sites

solidfr

Link to comment

Share on other sites

Pabs

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com