jQuery Girl
  1. jQuery Girl
  3. Modifier les couleurs de survol du menu CSS
Intereting Posts
Utilisation de types d’entrée HTML5 et de jQuery Boîte de message comme Facebook jQuery trouver “sélecteur” Obtenir tout le texte avant SelectionStart et après SelectionEnd Comment trouver / remplacer html avec javascript? jQuery comment remplacer l’URL src jquery filter image problèmes de src Chargement du script à partir du fichier .js Glisser Déplacer une image dans un cercle (mouvement circulaire) Aide à l’optimisation / refactoring du code Comment dessiner un tableau comme ci-dessous en utilisant le tableau js Comment append un retard sur le survol de Bootstrap Dropdown Ne pas permettre à l’utilisateur d’entrer des nombres supérieurs à 12 Ouvrir popup onbeforeunload Les gestionnaires d’événements JQuery ne se déclenchent pas

Modifier les couleurs de survol du menu CSS

J’ai ce CSS pour mon menu horizontal: 

.active { /* active/current link */ background: #666666; text-decoration:none; } .toggleMenu { /* small screen open menu option/link */ display: none; background: #666666; padding: 10px 15px; color: #ffffff; width:100%; text-align:center; } a { text-decoration: none; } .container { width: 100%; margin: 10px auto; } .nav { /* main nav bar */ list-style: none; *zoom: 1; background:#f36f25; text-align: center; } .nav:before,.nav:after { content: " "; display: table; } nav, ul, li, a { margin: 0; padding: 0; } .nav > li:hover { /* main link hover */ background: #666666; text-decoration:none; } .nav:after { clear: both; } .nav ul { list-style: none; width: 12em; } .nav a { padding: 10px 15px; color:#fff; } .nav li { position: relative; text-align: left; } .nav > li { display: inline-block; } .nav > li > .parent { background-image: url("/images/downArrow.png"); background-repeat: no-repeat; background-position: right; } .nav > li > a { display: block; } .nav li ul { position: absolute; left: -9999px; } .nav > li.hover > ul { left: 0; } .nav li li.hover ul { left: 100%; top: 0; } .nav li li a { /* sub menu list */ display: block; background: #F36F25; position: relative; z-index:100; border-top: 1px solid #ffffff; } .nav li li.hover a { /* sub menu list hover */ background:#666666; } .nav li li li.hover a { /* sub sub menu list hover */ background:#F36F25; color:#ffffff; z-index:200; border-top: 1px solid #ffffff; } .nav li li li a { /* sub sub menu list */ background:#F36F25; } @media screen and (max-width: 760px) { .active { display: block; } .nav { border-top: none; } .nav > li { display: block; border-top: 1px solid #ffffff; } .nav > li > .parent { background-position: 95% 50%; } .nav li li .parent { background-image: url("/images/downArrow.png"); background-repeat: no-repeat; background-position: 95% 50%; } .nav ul { display: block; width: 100%; } .nav > li.hover > ul , .nav li li.hover ul { position: static; } }

mais je ne peux pas comprendre comment changer l’arrière-plan du sous-menu et les couleurs de l’arrière-plan

voici un violon: http://jsfiddle.net/UY7z4/1/

METTRE À JOUR:

Voici les sous-menus: 

 .nav li li a { /* sub menu list */ display: block; background: #F36F25; position: relative; z-index:100; border-top: 1px solid #ffffff; } .nav li li.hover a { /* sub menu list hover */ background:#666666; } .nav li li li a { /* sub sub menu list */ background:#F36F25; } .nav li li li.hover a { /* sub sub menu list hover */ background:#666666; color:#ffffff; z-index:200; border-top: 1px solid #ffffff; }

le sous-menu doit donc avoir l’arrière-plan #F36F25 et #666666

et le sous-menu devrait avoir l’arrière-plan #F36F25 et l’arrière-plan #666666

Vous pouvez essayer avec ce sélecteur pour le sous-menu: 

 .nav >li ul > li a { background:red; } .nav >li ul >li:hover > a { background:blue; }

Et pour le sous-menu ceci: 

 .nav >li ul > li ul li a { background:pink; } .nav >li ul > li ul li:hover a { background:brown; }

La démo http://jsfiddle.net/UY7z4/11/

vous devez append: 

 /*for hover*/ .nav li ul li:hover { background: #666666; text-decoration:none; } /*for background*/ .nav li ul li{ background: #F36F25 ; text-decoration:none; }

Réponse mise à jour ici

http://jsfiddle.net/UY7z4/19/ 

 .nav > li > ul > li.hover > a { /* sub menu list hover */ background:#666666; } .nav > li > ul > li.hover > ul > li { /* sub sub menu list hover */ background:#F36F25; } .nav > li > ul > li.hover > ul > li:hover a { background:#666; color:#ffffff; z-index:200; border-top: 1px solid #ffffff; }