hover之后悬浮部分不出来。真不知道错哪里
切克闹_
2016-02-27 15:09
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css/css练习.css" type="text/css" />
//引入代码如下
@charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px;}
.nav_item{ width:220px; border:2px solid #e4393c; margin:10px; position:relative;}/*ul大盒子导航*/
.nav_item .bt_item{ height:40px; line-height:40px; font-size:15px; font-family:"微软雅黑"; padding:0px 20px; background-color:#e4393c;}/*ul下面的标题部分*/
.nav_item .bt_item a{ color:#FFF; text-decoration:none;}
.nav_item li{ height:30px; line-height:30px; text-align:left; padding-left:8px; font-size:14px;list-style-type:none; background:url(../images/ybxtb1.png) no-repeat right;}/*公共部分的li*/
.nav_item li a{ color:#000; text-decoration:none; }/*公共部分的a标签*/
/*.nav_item span{ display:inline-block; width:10px; height:30px; background-color:#F00;}*/
.nav_item li:hover{ border:1px solid #DDD;-webkit-box-shadow:0 0 8px #DDD;}
.nav_item li:hover .suspension{ display:block;}
/*悬浮部分制作*/
.bt_item .suspension{ width:1000px; border:1px solid #DDD; position:absolute; left:220px; -webkit-box-shadow:0 0 8px #DDD; z-index:5; background-color:#FFF; display:none;}/*悬浮大盒子*/
.bt_item .suspension1_left{ float:left; width:780px; margin:5px;}/*第一个悬浮大盒子的左边*/
.bt_item .suspension1_right{ float:left; width:200px; background-color:red; margin:5px;}/*第一个悬浮大盒子的右边*/
</head>
<body>
<ul class="nav_item">
<h1 class="bt_item">
<a href="#">全部商品分类</a>
<div class="suspension">
<div class="suspension1_left">
左边的部分001<br />
左边的部分001<br />
左边的部分001<br />
左边的部分001<br />
左边的部分001<br />
左边的部分001<br />
</div>
<div class="suspension1_right">
右边的部分<br />
右边的部分<br />
右边的部分<br />
右边的部分<br />
右边的部分<br />
</div>
</div>
</h1>
<li class="dh_item1">
<a href="#">家用电器</a>
</li>
<li class="dh_item2">
<a href="#">手机、</a><a href="#">数码、</a><a href="#">京东通信</a>
</li>
<li class="dh_item3">
<a href="#">电脑、</a><a href="#">办公</a>
</li>
<li class="dh_item4">
<a href="#">家居、</a><a href="#">家具、</a><a href="#">家装、</a><a href="#">厨具</a>
</li>
<li class="dh_item5">
<a href="#">男装、</a><a href="#">女装、</a><a href="#">内衣、</a><a href="#">珠宝</a>
</li>
<li class="dh_item6">
<a href="#">个人化妆</a><a href="#">清洁用品</a>
</li>
<li class="dh_item7">
<a href="#">鞋靴、</a><a href="#">箱包、</a><a href="#">钟表、</a><a href="#">奢侈品</a>
</li>
<li class="dh_item8">
<a href="#">运动户外</a>
</li>
<li class="dh_item9">
<a href="#">汽车</a><a href="#">汽车用品</a>
</li>
<li class="dh_item10">
<a href="#">母婴</a><a href="#">玩具乐器</a>
</li>
<li class="dh_item11">
<a href="#">食品、</a><a href="#">酒类、</a><a href="#">生鲜、</a><a href="#">特产</a>
</li>
<li class="dh_item12">
<a href="#">营养保健</a>
</li>
<li class="dh_item13">
<a href="#">图书、</a><a href="#">音像、</a><a href="#">电子书</a>
</li>
<li class="dh_item14">
<a href="#">彩票、</a><a href="#">旅行、</a><a href="#"></a><a href="#">充值、</a><a href="#">票务</a>
</li>
<li class="dh_item15">
<a href="#">理财、</a><a href="#">众筹、</a><a href="#">白条、</a><a href="#">保险</a>
</li>
</ul>
</body>
</html>
1回答
-
- 切克闹_
- 2016-02-27 15:12:22
编辑器截图
商城分类导航效果
63734 学习 · 315 问题
相似问题