css代码
<style type="text/css">
body,div,ul,li,a,h3{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
width:180px;
margin-left: 30px;
}
li{
list-style: none;
width:178px;
height:30px;
padding:5px 10px;
background: #BCD68D;
}
.list{
position: relative;
}
.list>li{
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
a{
color: #000;
font-size: 16px;
text-decoration: none;
font-family: "microsoft yahei";
}
.hbgc{
background-color: red;
}
.second{
position: absolute;
left: 147px;
display: none;
border: 1px solid #000;
}
.sec1{
top:36px;
}
.sec2{
top:66px;
}
.sec3{
top:96px;
}
.sec4{
top:126px;
}
.sec5{
top:156px;
}
h3{
width: 178px;
border: 1px solid #000;
background: #BCD68D;
padding:5px 10px;
}
.borc{
position: relative;
}
li.borc:before{
content:"";
width:4px;
height: 30px;
display: block;
background: #BCD68D;
z-index: 99;
position: absolute;
top:0;
left:-2px;
}
</style>
html代码
<div class="nav">
<ul class="list">
<h3>电脑数码类产品</h3>
<li><a href="#">笔记本</a>
<ul class="second sec1">
<li class="borc"><a href="#">笔记本1</a></li>
<li><a href="#">笔记本2</a></li>
<li><a href="#">笔记本3</a></li>
</ul>
</li>
<li><a href="#">移动硬盘</a>
<ul class="second sec2">
<li class="borc"><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘2</a></li>
<li><a href="#">移动硬盘3</a></li>
</ul>
</li>
<li><a href="#">全球购</a>
<ul class="second sec3">
<li class="borc"><a href="#">全球购1</a></li>
<li><a href="#">全球购2</a></li>
<li><a href="#">全球购3</a></li>
</ul>
</li>
<li><a href="#">电脑软件</a>
<ul class="second sec4">
<li class="borc"><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件2</a></li>
<li><a href="#">电脑软件3</a></li>
</ul>
</li>
<li><a href="#">数码产品</a>
<ul class="second sec5">
<li class="borc"><a href="#">数码产品1</a></li>
<li><a href="#">数码产品2</a></li>
<li><a href="#">数码产品3</a></li>
</ul>
</li>
</ul>
</div>
javascript代码
<script type="text/javascript">
$(function(){
$("li").mouseover(function(){
$(this).children("ul").css("display","block");
});
$("li").mouseout(function(){
$(this).children("ul").css("display","none");
});
})
</script>