Menu Deroulant 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.

franckm1000 · November 17, 2012

ou tu donnes un lien pour pouvoir regarder en direct ou tu utilises firebug.

sudconnect · November 17, 2012

ou tu donnes un lien pour pouvoir regarder en direct ou tu utilises firebug.

Le site est sur www.cannes-destock.com

C'est le top menu qui me pose problème.

Et j'ai pris firebug, j'ai testé mais j'y comprend rien..

franckm1000 · November 17, 2012

Fichier: /modules/blocktopmenu/css/superfish-modified.css

Ligne 44 classe .sfmenu a , tu changes:

color:#fff;

en color:#336993

Ligne 99, tu ajoutes dans la classe suivante .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active (après le background) la ligne

color:#fff;

Enfin, ligne 108, pour la classe .sf-menu a.sf-with-ul tu ajoutes la ligne suivante:

color:#fff;

sudconnect · November 17, 2012

Franchement bien joué. Merci beaucoup.

sudconnect · November 17, 2012

Dernière question mais si c'est trop compliqué c'est pas grave.

Tu sais comment je peux faire pour que les sous menus soient en 16px (et que le bloc est une bordure colorée) en laissant les titres menus (catégories) en 18 px ?

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

Sign In

Menu Deroulant horizontal

Recommended Posts

sudconnect

Link to comment

Share on other sites

franckm1000

Link to comment

Share on other sites

sudconnect

Link to comment

Share on other sites

franckm1000

Link to comment

Share on other sites

sudconnect

Link to comment

Share on other sites

sudconnect

Link to comment

Share on other sites

Browse

Activity

Go back to prestashop.com