这里是html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
</head>
<body>
<ul class="menulist">
<div class="menutitle">全部商品分类</div>
<li class="home"><a href="#">家用电器</a><i>></i><span></span>
<!--浮动层 开始-->
<div class="hoverdiv">
<div class="hoverleft">
<div class="lefttop">
<a href="#" target="_blank">品牌日<b>></b></a>
<a href="#" target="_blank">家电城<b>></b></a>
<a href="#" target="_blank">智能生活馆<b>></b></a>
<a href="#" target="_blank">京东净化馆<b>></b></a>
<a href="#" target="_blank">京东帮服务店<b>></b></a>
<a href="#" target="_blank">值得买精选<b>></b></a>
</div>
<div class="leftbottom">
<dl>
<dt><a href="#">大家电 ></a></dt>
<dd>
<a href="#">平板电视</a>
<a href="#">家用空调</a>
<a href="#">家用中央空调</a>
<a href="#">冰箱</a>
<a href="#">洗衣机</a>
<a href="#">家庭影院</a>
<a href="#">DVD</a>
<a href="#">迷你音响</a>
<a href="#">冷柜/冰吧</a>
<a href="#">酒柜</a>
<a href="#">家电配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">厨卫大电 ></a></dt>
<dd>
<a href="#">油烟机</a>
<a href="#">燃气灶</a>
<a href="#">烟灶套装</a>
<a href="#">消毒柜</a>
<a href="#">洗碗机</a>
<a href="#">电热水器</a>
<a href="#">燃气热水器</a>
<a href="#">嵌入式厨电</a>
</dd>
</dl>
<dl>
<dt><a href="#">厨卫小电 ></a></dt>
<dd>
<a href="#">电饭煲</a>
<a href="#">微波炉</a>
<a href="#">电烤箱</a>
<a href="#">电磁炉</a>
<a href="#">电压力锅</a>
<a href="#">豆浆机</a>
<a href="#">咖啡机</a>
<a href="#">榨汁机</a>
<a href="#">料理机</a>
<a href="#">电饼铛</a>
<a href="#">养生壶/煎药壶</a>
<a href="#">酸奶机</a>
<a href="#">煮蛋器</a>
<a href="#">电水壶/热水瓶</a>
<a href="#">电炖锅</a>
<a href="#">多用途锅</a>
<a href="#">电烧烤炉</a>
<a href="#">电热饭盒</a>
<a href="#">其他厨房电器</a>
</dd>
</dl>
<dl>
<dt><a href="#">生活电器 ></a></dt>
<dd>
<a href="#">电风扇</a>
<a href="#">冷风扇</a>
<a href="#">吸尘器</a>
<a href="#">净化器</a>
<a href="#">扫地机器人</a>
<a href="#">加湿器</a>
<a href="#">挂熨斗/熨斗</a>
<a href="#">取暖电器</a>
<a href="#">插座</a>
<a href="#">电话机</a>
<a href="#">净水器</a>
<a href="#">饮水机</a>
<a href="#">除湿机</a>
<a href="#">干衣机</a>
<a href="#">清洁机</a>
<a href="#">收录/音机</a>
<a href="#">其他生活电器</a>
<a href="#">生活电器配件</a>
</dd>
</dl>
<dl>
<dt><a href="#">个护健康 ></a></dt>
<dd>
<a href="#">剃须刀</a>
<a href="#">空腔护理</a>
<a href="#">电吹风</a>
<a href="#">美容器</a>
<a href="#">卷/直发器</a>
<a href="#">理发器</a>
<a href="#">剃/脱毛器</a>
<a href="#">足浴盆</a>
<a href="#">健康秤/厨房秤</a>
<a href="#">按摩器</a>
<a href="#">按摩椅</a>
<a href="#">血压计</a>
<a href="#">血糖仪</a>
<a href="#">体温计</a>
<a href="#">计步器/血糖监控仪</a>
<a href="#">其他健康电器</a>
</dd>
</dl>
<dl>
<dt><a href="#">五金家装 ></a></dt>
<dd>
<a href="#">电动工具</a>
<a href="#">手动工具</a>
<a href="#">仪器仪表</a>
<a href="#">浴霸/排风扇</a>
<a href="#">灯具</a>
<a href="#">LED灯</a>
<a href="#">洁身器</a>
<a href="#">水槽</a>
<a href="#">龙头</a>
<a href="#">淋浴花洒</a>
<a href="#">厨卫五金</a>
<a href="#">家具五金</a>
<a href="#">门铃</a>
<a href="#">电器开关</a>
<a href="#">插座</a>
<a href="#">电工电料</a>
<a href="#">监控安防</a>
<a href="#">电线/电缆</a>
</dd>
</dl>
</div>
</div>
<div class="hoverright">
<a href="#"><img src="img/1.jpg" /></a>
<a href="#"><img src="img/2.jpg" /></a>
<a href="#"><img src="img/3.jpg" /></a>
<a href="#"><img src="img/4.jpg" /></a>
<a href="#"><img src="img/5.jpg" /></a>
<a href="#"><img src="img/6.jpg" /></a>
<a href="#"><img src="img/a.jpg" /></a>
<a href="#"><img src="img/b.jpg" /></a>
</div>
</div>
<!--浮动层 结束-->
</li>
<li><a href="#">手机、数码、京东通信</a><i>></i></li>
<li><a href="#">电脑、办公</a><i>></i></li>
<li><a href="#">家居、家具、家装、厨具</a><i>></i></li>
<li><a href="#">男装、女装、童装、内衣</a><i>></i></li>
<li><a href="#">个护化妆、清洁用品、宠物</a><i>></i></li>
<li><a href="#">鞋靴、箱包、珠宝、奢侈品</a><i>></i></li>
<li><a href="#">运动户外、钟表</a><i>></i></li>
<li><a href="#">汽车、汽车用品</a><i>></i></li>
<li><a href="#">母婴、玩具乐器</a><i>></i></li>
<li><a href="#">食品、酒类、生鲜、特产</a><i>></i></li>
<li><a href="#">医药保健</a><i>></i></li>
<li><a href="#">图书、音像、电子书</a><i>></i></li>
<li><a href="#">彩票、旅行、充值、票务</a><i>></i></li>
<li><a href="#">理财、众筹、白条、保险</a><i>></i></li>
</ul>
<script>
$(function(){
$(".home").hover(function(){
$(".hoverdiv").show();
},function(){
$(".hoverdiv").hide();
});
});
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
color: #fff;
}
body{
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino SansGB","b8bf53",sans-serif;
}
.menulist{
width: 210px;
background: #c81623;
margin: 20px 20px;
border-bottom: 1px solid #C81623;
}
.menutitle{
background: #B1191A;
color: #fff;
height: 41px;
line-height: 41px;
font-weight: bold;
font-size: 11pt;
text-indent: 1em;
}
.menulist li{
font-size: 9pt;
height: 31px;
line-height: 31px;
text-indent: 1em;
position: relative;
z-index: 9;
}
.menulist li i{
color: #fff;
display: block;
float: right;
margin-right: 10px;
}
.menulist li:hover{
color: #B1191A;
background: #fff;
width: 209px;
border-left: 1px solid #C81623;
}
.menulist li:hover a{ color: #c81623;}
.menulist li:hover span{ width: 20px; height: 31px; display: inline-block; background: #fff; position: absolute; top: 0; right: -5px; z-index: 99;}
/*浮动层样式*/
.hoverdiv{
position: absolute;
width: 999px;
padding: 20px;
top: -1px;
left: 209px;
border: 1px solid #C81623;
}
.hoverleft{
width: 790px;
float: left;
}
.lefttop a{
line-height: 24px;
display: inline-block;
color: #FFFFFF!important;
padding: 0 0 0 4px;
margin-right: 10px;
background: #7C7171;
}
.lefttop a b{
display: inline-block;
height: 24px;
width: 23px;
background: #5c5251;
margin-left: 4px;
}
.lefttop a:hover{
background: #C81623;
}
.lefttop a:hover b{
background: #B1191A;
}
.leftbottom dl{
display: block;
overflow: hidden;
}
.leftbottom a{
color: #666!important;
}
.leftbottom dl dt{
display: inline-block;
float: left;
width: 80px;
text-align: right;
font-weight: 700;
font-size: 11pt;
text-indent:0 !important;
margin-right: 10px;
}
.leftbottom dl dd{
width: 670px;
display: block;
text-indent:0 !important;
border-bottom: 1px solid #E0E0E0;
-webkit-margin-start: 90px;
}
.leftbottom dl dd a{
line-height: 16px;
height: 16px;
display: inline-block;
border-left: 1px solid #e0e0e0;
padding: 0px 8px;
}
.hoverright{
float: right;
width: 190px;
text-indent: 0;
display: inline;
}
.hoverright img{border: none;}
.hoverdiv{display: none;}
/*.menulist li:hover .hoverdiv{display: block;}*/
.hoverdiv dl a:hover{
color: #C81623!important;}
.hoverdiv dd a:hover{
color:#C81623!important;}*/
2320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
