我找到了这样的解决方案
li:hover >a
{
background-color:#ad7272;
}
这是我的CSS + HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
body {
background-color:#CC3;
font-family:Verdana;
padding:50px; /*all four paddings are 50px*/
}
h1 {
text-align:center;
border-bottom:2px solid #666;
}
ul#mainmenu,ul.sub1,ul.sub2,ul.sub3,ul.sub4,ul.sub5 {
list-style-type:none;
font-size:15px;
}
ul#mainmenu li{
float:left;
position:relative;
width:350px;
text-align:center;
margin-right:3px; /*renders a right margin of 5 pixels around the list items */
}
ul#mainmenu a {
text-decoration:none;
display:block;
line-height:25px; /*gives a vertical centering*/
width:350px; /*same as the width of the list items*/
height:25px;
background-color:#C0DCC0;
border-radius:5px;
outline:1px solid red; /*takes up the space outside of the elements's container (i.e. in this case the outside of the list items*/
}
ul#mainmenu .sub1 li {
margin-top:2px;
}
ul#mainmenu .sub1 a {
border:1px solid green; /*takes up the space outside of the content itself i.e. the anchor tags . That's where the border radius comes into the picture*/
}
ul#mainmenu .sub2 li,.sub3 li,.sub4 li,.sub5 li {
margin-left:20px;
}
ul#mainmenu li:hover > a {
background-color:#ad7272;
}
</style>
<h1>Welcome</h1>
<ul id="mainmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul class="sub1">
<li><a href="#">Clothing</a>
<ul class="sub2">
<li><a href="#">T-Shirts</a>
<ul class="sub3">
<li><a href="#">Polo</a></li>
<li><a href="#">V-Neck</a></li>
<li><a href="#">Henley</a></li>
</ul>
</li>
<li><a href="#">Shirts</a>
<ul class="sub4">
<li><a href="#">Half-Sleeve</a></li>
<li><a href="#">Full-Sleeve</a></li>
</ul>
</li>
<li><a href="#">Jeans</a></li>
<li><a href="#">Trousers</a></li>
</ul>
</li>
<li><a href="#">Shoes</a>
<ul class="sub5">
<li><a href="#">Sports-Shoes</a></li>
<li><a href="#">Formal-Shoes</a></li>
</ul>
</li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
我无法理解这些步骤。它是如何工作的？ 在最后一个样式部分，我猜是使用直接子选择器。 但是，当我将鼠标悬停在它上面时，为什么每个子菜单列表项都会改变它的背景颜色？ 我无法理解这个概念。 我想在CSS中实现它。请解释如何操作以及如何执行此操作。
答案 0 :(得分：0)
以下是您的查询解决方案。
CSS3
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0 9px 9px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
*display:inline;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0 0 0 1px;}
ul#css3menu1 ul>li{
margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#cccccc;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#00c4ff;border-style:none;color:#ffffff;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#333;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 _>li>a{
padding:0;}
ul#css3menu1 li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst a.pressed{
border-style:none;}
HTML
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="#" style="height:15px;line-height:15px;">Item 0</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Item 1</span></a>
<ul>
<li class="subfirst"><a href="#">Item 1 0</a></li>
<li><a href="#">Item 1 1</a></li>
<li><a href="#">Item 1 2</a></li>
</ul></li>
<li class="toplast"><a href="#" style="height:15px;line-height:15px;">Item 2</a></li>
</ul>