CSS - 下拉菜单中更改颜色,而徘徊在子菜单项
问题描述:
我有这样的HTML一个导航栏:CSS - 下拉菜单中更改颜色,而徘徊在子菜单项
<html>
<nav class="mainMenu1">
<ul class="menu">
<li class="menu-item">
<a href="#">Options</a>
<ul class="sub-menu">
<li>Option 1</li>
...
</ul>
</li>
</ul>
</nav>
</html>
我需要更改与类锂元素的背景颜色:菜单项,而子菜单项(也LI)正在通过鼠标悬停......这里是我的CSS迄今:
nav.mainMenu1 ul li.active > a {
background: #044668 !important; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#044668, #008bbc) !important; /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#044668, #008bbc) !important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#044668, #008bbc) !important; /* For Firefox 3.6 to 15 */
background: linear-gradient(#044668, #008bbc) !important; /* Standard syntax */
}
答
在CSS中是没有办法选择的父元素或以前的选择,但你可以做一个技巧使用:after
pseudoelement
.menu-item{
position: relative;
}
.sub-menu:after{
content: '';
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #044668 !important;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#044668, #008bbc) !important;
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#044668, #008bbc) !important;
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#044668, #008bbc) !important;
/* For Firefox 3.6 to 15 */
background: linear-gradient(#044668, #008bbc) !important;
/* Standard syntax */
}
.sub-menu:hover:after{
display: block;
}
<nav class="mainMenu1">
<ul class="menu">
<li class="menu-item">
<a href="#">Options</a>
<ul class="sub-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</li>
</ul>
</nav>
请更新你有完整的CSS问题。构建一个工作示例(snippet/jsfiddle)以显示您目前为止的内容。 – Dekel