裸奔的萝卜丝
2016-04-05 17:25
<!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无法更改背景状态,但是边框和阴影都出现了,这个原因是?
我也是这个问题 我只在li hover 那里改变的背景颜色 之后可以正常显示效果 希望可以帮到你
.topmenu li:hover{
border: 1px solid #ddd;
border-right:0;
box-shadow: 0 0 8px #ddd;
background: black;
}
#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;
}
代码第一行的 #ul 去除 即可!
商城分类导航效果
63734 学习 · 313 问题
相似问题