动手写了一个纯CSS的分类菜单，貌似还挺好用，可惜就没有添加动态效果了
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>分类菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.5 "宋体";
}
a {
text-decoration: none;
}
a:hover {
color: red;
}
ul {
position: relative;
margin: 50px 0 0 50px;
width: 300px;
border: 2px solid #aa9900;
}
li {
height: 30px;
line-height: 30px;
width: 100%;
text-indent: 1em;
list-style: none;
border-top: 1px solid #CCC;
}
li:hover,
li:hover + li,
li:first-child {
border-top: none;
height: 31px;
line-height: 31px;
}
div.box {
width: 300px;
height: calc(100% + 2px);
display: none;
left: 300px;
top: -2px;
border: 1px solid #999;
position: absolute;
z-index: 1;
background: #EEE;
}
div.item {
position: relative;
width: 100%;
height: 100%;
}
li:hover div.box {
display: block;
}
li div.item span.link {
display: block;
width: calc(100% - 1px);
height: calc(100% - 2px);
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-color: #FFF;
border-width: 1px 0 1px 1px;
z-index: 2;
}
li:hover div.item span.link {
border-color: #999;
background: #EEE;
width: 100%;
}
span.icon {
position: absolute;
right: 10px;
top: 0;
color: #999;
font-weight: bold;
font-family: serif;
}
li:hover a {
color: #270;
}
</style>
</head>
<body>
<ul>
<li>
<div class="item">
<span class="link">
<a href="#">分类1</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类1 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类2</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类2 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类3</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类3 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类4</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类4 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类5</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类5 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类6</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类6 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类7</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类7 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类8</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类8 详细信息</div>
</li>
<li>
<div class="item">
<span class="link">
<a href="#">分类9</a>
</span>
<span class="icon">></span>
</div>
<div class="box">分类9 详细信息</div>
</li>
</ul>
</body>
</html>
