-1
Kann mir bitte jemand Ratschläge geben oder mir sagen, wie man nur meinem ersten und letzten Kind meines Untermenüs einen Rahmen hinzufügt. Das Problem mit CSS last-child und Erstes Kind ist, dass mein Menü li von 2 ULs mit li Elementen aufgebaut ist. Was ich sagen will ist, wenn ich ul li:last-child weil meine Li mit Name test2 nur 1 Kindul habe, zielt es sowohl auf die erste ul meines Menüs und das passiert: http://prntscr.com/dbxpeoWie man den unteren Rand nur auf das letzte Kind des Dropdown-Menüs setzen kann
Es zielt auf erste ul meiner anderen anderen Li-Element, die 2 ul drin haben. Ich mag Grenze nur auf der Unterseite und nur auf den ersten und letzten li Elemente, so dass es als Hintergrund, wenn Sie im Menü bewegen, ist so etwas wie This! Hier ist meine CSS:
/*--------------------------------------------------------------
13. Navigation
--------------------------------------------------------------*/
.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 {
display:block;
right:-2%;
float:left;
border-right:1px solid black;
position:relative;
height:auto;
}
/*
.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 .sub-menu li ul li:last-child, .menu-new li .sub-menu li:last-child {
border-bottom:12px solid black;
border-rdius:5%;
}
/*
.menu-new li > ul >li >ul >li:last-child{
border-bottom:20px solid black;
border-radius:7px;
}
*/
.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.8;
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:hover li a{
background:#000;
color:#FFFFFF;
opacity:0.7;
}
.menu-new li li li a{
text-align:center;
}
.menu-new li ul a:hover, .menu li ul li:hover a .menu li li li:hover{
border:0px;
text-align:center;
color:#ffffff;
background:#8c8c8c;
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);
}
@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;
}
}<div class="menu-new">
<nav class="menu" role="navigation">
<ul class="menu ul">
<li>
<a></a>
</li>
<li>
<a></a> <ul>
<li>
<a></a>
<ul>
<li>
<a></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<li>
<a></a>
</li>
<li>
<a></a>
<ul>
<li>
<a></a>
</li>
</ul>
</li>
</nav>
</div>Ich arbeite an WordPress, also habe ich versucht, das HTML des Menüs zu rekonstruieren, ich denke, es ist genau.
Was ist mit 'ul.menu> li: last-child' mit'> 'included –
haben Sie eine Online-Demo oder Site-URL, so kann ich einen Blick – Rahul
Ich gebe Ihnen die Website-Link, weil ich don ' Ich habe eine Demo. http://shreddingnation.com/ – Dako