我正在为我的网站制作菜单。
/*General styles for body*/
span, a, p, label {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 14px;
color: #767676;
text-decoration: none;
}
a:hover {
color: hotpink;
font-weight: bolder;
font-size: 14px;
text-shadow: 5px 4px 21px -5px rgba(0,0,0,0.6);
}
label:hover {
color: hotpink;
font-weight: bolder;
font-size: 14px;
text-shadow: 5px 4px 21px -5px rgba(0,0,0,0.6);
}
/*Style for the first level menu bar*/
ul#menu{
display:block;
text-align: center;
}
ul#menu > li{
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
max-width:30%;
list-style-type:none;
position:relative;
-webkit-box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
-moz-box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
}
label{
position:relative;
display:block;
padding:0 18px 0 18px;
line-height:3.5em;
transition:background 0.3s;
cursor:pointer;
}
label:after{
content:"";
position:absolute;
display:block;
top:50%;
right:25px;
width:0;
height:0;
border-top:4px solid rgba(0,0,0,.3);
border-bottom:0 solid rgba(0,0,0,.3);
border-left:4px solid transparent;
border-right:4px solid transparent;
transition:border-bottom .1s, border-top .1s .1s;
}
label:hover,
input:checked ~ label{background:rgba(200,255,138,.4);}
input:checked ~ label:after{
border-top:0 solid rgba(0,0,0,.3);
border-bottom:4px solid rgba(0,0,0,.3);
transition:border-top .1s, border-bottom .1s .1s;
}
/*hide the inputs*/
input{display:none}
/*show the second levele menu of the selected voice*/
input:checked ~ ul.submenu{
max-height:300px;
transition:max-height 0.5s ease-in;
}
/*style for the second level menu*/
ul.submenu{
max-height:0;
padding:0;
overflow:hidden;
list-style-type:none;
background:#fff;
transition:max-height 0.5s ease-out;
position:relative;
min-width:100%;
}
ul.submenu li a{
display:block;
padding:12px;
text-decoration:none;
box-shadow:0 -0.2px rgba(0,0,0,.2) inset;
transition:background .3s;
white-space:nowrap;
}
ul.submenu li a:hover{
background:rgba(50,160,90,.2);
}<p>Lorem ipsum dolor </p>
<ul id="menu">
<li>
<a href="#">
<input id="check01" type="button"/>
<label for="check01">just button</label>
</a>
</li>
<li>
<input id="check02" type="checkbox" name="menu"/>
<label for="check02">more stuff here</label>
<ul class="submenu">
<li><a href="#">stuff1</a></li>
<li >
<input id="check03" type="checkbox" name="menu"/>
<label for="check03">bunch of other stuff</label>
<ul class="submenu" style="background:#e7e7e7">
<li><a href="#">bunch 1</a></li>
<li><a href="#">bunch 2</a></li>
</ul>
</li>
<li><a href="#">stuff 2</a></li>
</ul>
</li>
</ul>
<br>
<article>
<p>Lorem ipsum dolor </p>
</article>
我修改了一些我喜欢的示例，除了一件事-“ button”项旁边显示的小箭头。禁止在下拉菜单旁边显示哪个。现在，它在那里是因为<li>下的所有#menu标签都有一个规则，但是是否有一种优雅的方法来排除那些没有子菜单的标签呢？这个菜单已经很脏了，我能提供的所有解决方案只会使情况变得更糟。
答案 0 :(得分：1)
小箭头在CSS中的定义为
label:after{
...
}
要排除只希望用作按钮的标签，可以向该标签添加class属性，然后从css声明中排除具有该类的标签，以
label:not(.buttonLabel):after{
...
}
/*General styles for body*/
span, a, p, label {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 14px;
color: #767676;
text-decoration: none;
}
a:hover {
color: hotpink;
font-weight: bolder;
font-size: 14px;
text-shadow: 5px 4px 21px -5px rgba(0,0,0,0.6);
}
label:hover {
color: hotpink;
font-weight: bolder;
font-size: 14px;
text-shadow: 5px 4px 21px -5px rgba(0,0,0,0.6);
}
/*Style for the first level menu bar*/
ul#menu{
display:block;
text-align: center;
}
ul#menu > li{
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
max-width:30%;
list-style-type:none;
position:relative;
-webkit-box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
-moz-box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
box-shadow: 5px 4px 27px -3px rgba(0,0,0,0.23);
}
label{
position:relative;
display:block;
padding:0 18px 0 18px;
line-height:3.5em;
transition:background 0.3s;
cursor:pointer;
}
label:not(.buttonLabel):after{
content:"";
position:absolute;
display:block;
top:50%;
right:25px;
width:0;
height:0;
border-top:4px solid rgba(0,0,0,.3);
border-bottom:0 solid rgba(0,0,0,.3);
border-left:4px solid transparent;
border-right:4px solid transparent;
transition:border-bottom .1s, border-top .1s .1s;
}
label:hover,
input:checked ~ label{background:rgba(200,255,138,.4);}
input:checked ~ label:after{
border-top:0 solid rgba(0,0,0,.3);
border-bottom:4px solid rgba(0,0,0,.3);
transition:border-top .1s, border-bottom .1s .1s;
}
/*hide the inputs*/
input{display:none}
/*show the second levele menu of the selected voice*/
input:checked ~ ul.submenu{
max-height:300px;
transition:max-height 0.5s ease-in;
}
/*style for the second level menu*/
ul.submenu{
max-height:0;
padding:0;
overflow:hidden;
list-style-type:none;
background:#fff;
transition:max-height 0.5s ease-out;
position:relative;
min-width:100%;
}
ul.submenu li a{
display:block;
padding:12px;
text-decoration:none;
box-shadow:0 -0.2px rgba(0,0,0,.2) inset;
transition:background .3s;
white-space:nowrap;
}
ul.submenu li a:hover{
background:rgba(50,160,90,.2);
}<p>Lorem ipsum dolor </p>
<ul id="menu">
<li>
<a href="#">
<input id="check01" type="button"/>
<label for="check01" class="buttonLabel">just button</label>
</a>
</li>
<li>
<input id="check02" type="checkbox" name="menu"/>
<label for="check02">more stuff here</label>
<ul class="submenu">
<li><a href="#">stuff1</a></li>
<li >
<input id="check03" type="checkbox" name="menu"/>
<label for="check03">bunch of other stuff</label>
<ul class="submenu" style="background:#e7e7e7">
<li><a href="#">bunch 1</a></li>
<li><a href="#">bunch 2</a></li>
</ul>
</li>
<li><a href="#">stuff 2</a></li>
</ul>
</li>
</ul>
<br>
<article>
<p>Lorem ipsum dolor </p>
</article>