html + css 实现商城分类效果
效果如下：
1、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏demo</title>
<link href="css/navigatordemo.css" rel="stylesheet" type="text/css">
</head>
<body>
<article>
<div class="nav">
<div class="title"><a href="#">全部商品分类</a></div>
<div class="category">
<ul>
<li><a href="#">家用电器</a><span>></span>
<div class="submenu">
<div class="leftdiv">
<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="#">畅读VIP</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>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<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>
</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>
</dd>
</dl>
<dl>
<dt><a href="#">经管励志</a></dt>
<dd>
<a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
</dd>
</dl>
<dl class="fore7">
<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>
</dd>
</dl>
<dl>
<dt><a href="#">科技</a></dt>
<dd>
<a href="#">科普</a> <a href="#">IT</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="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
<a href="#">11-14岁</a>
</dd>
</dl>
<dl>
<dt><a href="#">教育</a></dt>
<dd>
<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>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
width="194" height="70" title="\家电">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
width="194" height="70" title="小家电--三请聚宝盆">
</a>
</dd>
</dl>
</div>
</div>
</li>
<li><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">京东通信</a><span>></span></li>
<li><a href="#">电脑</a>、<a href="#">办公</a><span>></span></li>
<li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a><span>></span></li>
<li><a href="#">手机</a>、<a href="#">男装</a>、<a href="#">女装</a>、<a href="#">内衣</a><span>></span></li>
<li><a href="#">个护化妆</a>、<a href="#">清洁用品</a><span>></span></li>
<li><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">珠宝</a>、<a href="#">奢侈品</a><span>></span></li>
<li><a href="#">运动户外</a>、<a href="#">钟表</a><span>></span></li>
<li><a href="#">汽车</a>、<a href="#">汽车用品</a><span>></span></li>
<li><a href="#">母婴</a>、<a href="#">玩具乐器</a><span>></span></li>
<li><a href="#">营养保健</a><span>></span></li>
<li><a href="#">图书</a>、<a href="#">音像</a><span>></span></li>
<li><a href="#">彩票</a>、<a href="#">旅行</a><span>></span></li>
<li><a href="#">理财</a><span>></span></li>
</ul>
</div>
</div>
</article>
</body>
</html>
2、css代码
*{
padding: 0; margin: 0; text-decoration: none; list-style: none;
color: #FFFFFF; font-size: 14px; font-family: "Microsoft YaHei UI";
}
.nav{
width: 250px; margin: 50px 0 0 150px;
height: 1200px;/*随便设置的高度值*/
}
.title {
background-color: #B1191A; padding: 0 10px; height: 44px;
line-height: 44px; text-align: left;
}
.title a {
font-weight: bold;
}
.category {
background-color: #c81623; border-left: 1px solid #c81623;
}
.category ul li {
position: relative;/*"套住"absolute子元素*/
height: 31px; line-height: 31px; padding: 0 10px;
}
.category ul li span {/*右箭头样式*/
position: absolute; right: 10px; height: 15px;
line-height: 31px; font-size: 14px; font-family: Consolas;
}
.category li:hover {
border-right: 0; color: #c81623; background-color: #FFFFFF;
}
.category li:hover > a {/*【注意】表示划过li时，改变直接子元素a的字体颜色*/
color: #c81623;
}
/*子菜单样式，设置绝对定位*/
.submenu {
display: none;/*默认不显示*/
position: absolute;
left: 249px;/*左边父菜单的宽度*/
top:-1px;/*w往上顶1px给border上边框*/
width: 710px;
height: 430px; /*31px * 14 - 1px *2(border) - 1px(padding) * 2 */
/*background-color: #ccc;*/
padding: 1px 0;
border: 1px solid red;
border-left: 0;/*去掉左边border边框*/
}
.leftdiv {
float: left; width: 490px; margin: 5px;
}
.rightdiv {
float: left; width: 150px; height: 100%; margin: 5px;
}
/*划过列表时显示子菜单*/
.category li:hover .submenu {
display: block;
}
.leftdiv dl {/*每个dl解释行的样式*/
display: block; border-bottom: 1px solid #EEE; overflow: hidden;
}
.leftdiv dl:last-child {/*取消最后一个border-bottom*/
border-bottom: 0;
}
.leftdiv dl {
display: block;
overflow: hidden;
}
.leftdiv dl dt {/*dt是标题*/
display: block; float: left;/*浮动起来*/
width: 65px; text-align: right;/*文字靠右*/
height: 22px; line-height: 22px; padding-right: 6px;
}
.leftdiv dl dt a { /*标题中文字的样式*/
font-weight: bold; color: black;
}
.leftdiv dl dd {
margin-left: 71px;/*左边margin一个dt的距离*/
}
.leftdiv dl dd a {/*内容中文字的样式*/
display: block; float: left;
border-left: 1px solid #CCC; /*左边的边框*/ color: #737373;
font-size: 10px; padding: 0 8px; height: 14px;
line-height: 14px; margin: 4px 0; /*dt为22px = 14 + 4 *2*/
}
