商品分类下拉菜单实现-优快云博客

本文介绍了一个使用HTML和CSS实现的商品分类下拉菜单案例，包括多种商品类型的细分选项，如电视、空调、洗衣机等，并展示了如何通过样式设置来完成布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<style>
.warp {
width:200px;
position:relative;
top:50px;
left:50px;
}
ul {
padding:15px 0px;
margin:9px;
list-style:none;
background:#6c6669;
color:#ffffff;
border-right-width:0px;
}
li {
display:block;
height:30px;
line-height:30px;
padding-left:12px;
cursor:pointer;
font-size:14px;
position:relative;
}
li.active {
background:#999395;
}
li span:hover {
color:#c81623;
}
.none {
/*display:none;*/
}
#sub {
width:700px;
position:absolute;
border:1px solid #f7f7f7;
background:#f7f7f7;
box-shadow:2px 0 5px rgba(0, 0, 0, 0.3);
left:195px;
top:0px;
box-sizing:border-box;
margin:0;
padding:10px;
}
.sub_content a {
font-size:12px;
color:#666;
text-decoration:none;
}
.sub_content dd a {
border-left:1px solid #e0e0e0;
padding:0 10px;
margin:4px 0;
}
.sub_content dl {
overlflow:hidden;
margin-top:10px;
}
.sub_content dt{
float:left;
width:70px;
font-weight:bold;
clear:left;
position:relative;
}
/* .sub_content dd{
float:left;
margin-left:5px;
border-top:1px solid #eee;
margin-bottom:5px;}*/
.sub_content dt i{

width:4px;
height:14px;
font:400 9px/14px consolas;
position:absolute;
right:5px;
top:5px;}
</style>
</head>
<body>
<div class="warp">
<ul>
<li data-id="a"> <span>家用电器</span> </li>
<li data-id="b"> <span>手机/运营商/数码</span> </li>
<li data-id="c"> <span>电脑办公</span> </li>
<li data-id="d"> <span>家居/家具/家装/厨具</span> </li>
<li data-id="e"> <span>男装/女装/童装/内衣</span> </li>
<li data-id="f"> <span>个人化妆/清洁用品/宠物</span> </li>
<li data-id="g"> <span>鞋靴/箱包/珠宝/奢侈品</span> </li>
<li data-id="h"> <span>运动/户外/钟表</span> </li>
<li data-id="i"> <span>汽车/汽车用品</span> </li>
<li data-id="j"> <span>女婴/玩具乐器</span> </li>
<li data-id="k"> <span>食品/酒类/生鲜/特产</span> </li>
<li data-id="l"> <span>医药保健</span> </li>
</ul>
<div id="sub" class="none">
<div id="a" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">电视<i>></i></a>
</dt>
<dd class="first">
<a href="#" target="_blank">合资品牌</a>
<a href="#" target="_blank">国产品牌</a>
<a href="#" target="_blank">互联网品牌</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">空调<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">壁挂式空调</a>
<a href="#" target="_blank">柜式空调</a>
<a href="#" target="_blank">中央空调</a>
<a href="#" target="_blank">空调配件</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">洗衣机<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">滚筒洗衣机</a>
<a href="#" target="_blank">洗烘一体机</a>
<a href="#" target="_blank">波轮洗衣机</a>
<a href="#" target="_blank">迷你洗衣机</a>
<a href="#" target="_blank">洗衣机配件</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">冰箱<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">多门</a>
<a href="#" target="_blank">对开门</a>
<a href="#" target="_blank">三门</a>
<a href="#" target="_blank">对开门</a>
<a href="#" target="_blank">双门</a>
<a href="#" target="_blank">冰柜/冰吧</a>
<a href="#" target="_blank">酒柜</a>
<a href="#" target="_blank">冰箱配件</a>
</dd>
</dl>


</div>
</div>
</div>
</body>
</html>