0
誰かが私のドロップダウンメニューに背景を追加する方法を教えてください。私のメニューのCSSコードはここに残しておきます。私のLi ulに背景を追加するには
.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;
}
}
質問コードヘルプには、問題**の中で、** [** Stack Snippet **]（** https://blog.stackoverflow.com/2014/09/）のコードを再現するのに必要な最短コードが含まれている必要があります。 introduction-runnable-javascript-css-and-html-code-snippets /）があります。 [**最小限で完全で検証可能なサンプルを作成する方法**]（http://stackoverflow.com/help/mcve） –