Question

有人可以告诉我如何在我的下拉菜单中添加背景This。我会在这里留下我的CSS代码作为我的菜单，如果有错误你也可以纠正我。这就是我的菜单现在看起来click有代码：

＆＃13;

.site-header .menu-new{
position:relative;
margin-bottom:1.5em;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:0.95em;
font-weight:bold;
width:63%;
height:80px;
left:245px;
}
.menu-new ul{
background:transparent
list-style:none;
height:100%;
width:100%;
margin:0;
padding:0;
border-radius: 15px;
  -ms-transform: skew(-15deg,0deg);
  -webkit-transform: skew(-15deg,0deg);
  transform: skew(-15deg,0deg);  
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
}
.menu-new li {
right:-2%;
float:left;
border-right:1px solid black;
position:relative;
height:80px;
}
.menu-new li:first-child{
border-left:1px solid black;
}
.menu-new li > a:after{
content: "\37";
font-family: "ElegantIcons";
}
.menu-new li a:only-child:after, .menu-new li li a:after{
content:"";
}
.menu-new li a{
display:block;
font-weight:normal;
line-height:80px;
margin:0px;
padding:0px 30px;
text-decoration:none;
text-align:center;
}
.menu-new li a:hover{
background:#8c8c8c;
opacity:0.3;
text-decoration:none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
.menu-new li ul{
display:none;
height:auto;
position:absolute;
padding:0px;
margin:0px;
border:0px;
width:200px;
z-index:200;
  -ms-transform: skew(0deg,0deg);
  -webkit-transform: skew(0deg,0deg);
  transform: skew(0deg,0deg);  
}
.menu-new ul li:hover a{
background:#000000;
color:#FFFFFF;
opacity:0.8;
text-decoration:none;
}
.menu-new li:hover ul{
display:block;
background:transparent;
color:transparent;
}
.menu-new li li{
display:block;
position:relative;
right:1px;
top:10%;
float:none;
margin:0px;
padding:0px;
width:200px;
background:#transparent;
}
.menu-new li li li {
display:block;
position:absolute;
left:0;
top:10%;
float:none;
margin:0px;
padding:0px;
width:200px;
background:transparent;
}
.menu-new li li li a{
text-align:center;
}
/*this is where the rounded corners for the dropdown disappears*/
}
.menu-new li:hover li a{
background:#8c8c8c;
color:#FFFFFF;
opacity:0.5;
}
.menu-new li ul a:hover, .menu li ul li:hover a .menu li li li:hover{
border:0px;
text-align:center;
color:#ffffff;
text-decoration:none;
background:#8c8c8c;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
@media screen and (max-width:1000px){
.menu-new{
display:none;
}
}
@media screen and (max-width:1030px){
.menu-new{
top:80px;
}
.menu li{
background:#fff;
opacity:0.8;
}
.menu-new li> li> li{
background:#fff;
color:#000;
opacity:0.8;
}
.menu-new li >li > li:hover{
background:#000;
color:#fff;
opacity:1;
}
}

＆＃13;

Answer 1

如果我说对了你，你试图在悬停时添加颜色？

如果是，请使用a:focus / a:hover更改此颜色，如果您愿意的话。例如：

.menu-new li ul li a:hover, .menu-new li ul li a:focus {
    background-color: red;
}

并且，给孩子元素一些课程是一个好习惯，这样你就可以绕过长css选择器。

如何在我的Li ul上添加背景

1 个答案: