新人问问题，li 中背景颜色问题，大神解答下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="dh1.css">
<script type="text/javascript" src="dh1.js"></script>
</head>
<body>
<div id="daoh">
<ul id='ul'>
<div id="all">全部商品分类</div>
<li><a href="#"><span color="black">电器、小商品、家用</span></a></li>
<li><a href="#">衣服、鞋子、内裤</a></li>
<li><a href="#">玻璃杯</a></li>
<li><a href="#">电器、小商品、家用</a></li>
<li><a href="#">电器、小商品、家用</a></li>
<li><a href="#">电器、小商品、家用</a></li>
<li><a href="#">电器、小商品、家用</a></li>
<li><a href="#">电器、小商品、家用</a></li>
<li><a href="#">电器、小商品、家用</a></li>
<li><a href="#">电器、小商品、家用</a></li>
<li><a href="#">电器、小商品、家用</a></li>
</ul>
<div id='newpa'>
</div>
</body>
</html>
css 如下：
{
margin: 0px,0px;
padding: 0px;
}
#ul {
width: 200px;
display: black;
border: 1px solid;
color: white;
margin-left:8px;
padding-left: 8px;
text-indent: 8px;
}
#all{
width: 200px;
height: 50px;
line-height: 48px;
font-size: 25px;
background-color:#B1191A;
padding-bottom: 5px;
}
#ul li{
display: block;
list-style-type: none;
text-decoration-style: none;
width: 200px;
height: 35px;
background-color:#C81623;
line-height: 33px;
background-image: url(jiantou.PNG);
background-repeat:no-repeat;
background-position: right;
}
a {
color:white;
text-decoration:none;
}
a:hover{
text-decoration:underline;
font-weight: bold;
color: red;
}
li:hover
{
display: block;
background-image: none;
background-color: white;
border:1px solid #DDD;
border-right:0;
box-shadow: 0 0 8px #DDD;
}
对li标签进行hover时发现有个问题，
鼠标经过时，
background-image: none;
background-color: white;
并未起作用，
边框和阴影出现了，
将 li:hover 前加上#ul ，能实现所有hover 效果；
后来测试时,写li 样式时，将#ul li{} 和#ul li:hover，可实现所有效果；
li{}和#ul li:hover{}，可实现所有效果；
li{}和li:hover{} 可实现所有效果
唯独#ul li{} 和li:hover无法更改背景状态，但是边框和阴影都出现了，这个原因是？
