我的水平菜单有这个CSS:
.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; } }
但我无法弄清楚如何更改子子菜单背景和hover背景颜色
这是一个小提琴: http : //jsfiddle.net/UY7z4/1/
更新:
这是子菜单:
.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; }
所以子菜单应该有#F36F25
背景和#666666
hover背景
子子菜单应该有#F36F25
背景和#666666
hover背景
您可以尝试使用此选择器进行子菜单:
.nav >li ul > li a { background:red; } .nav >li ul >li:hover > a { background:blue; }
对于子子菜单:
.nav >li ul > li ul li a { background:pink; } .nav >li ul > li ul li:hover a { background:brown; }
演示https://jsfiddle.net/UY7z4/11/
你需要添加:
/*for hover*/ .nav li ul li:hover { background: #666666; text-decoration:none; } /*for background*/ .nav li ul li{ background: #F36F25 ; text-decoration:none; }
这里更新了答案
.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; }
以上就是jQuery教程分享更改CSS菜单hover颜色相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/541230.html