`
<style>
* {
padding: 0;
margin: 0;
}
.body {
height: 600px;
width: 500px;
border: 1px solid #00B0FF;
margin: 50px auto;
}
.head {
float:left;
height:100px;
width:500px;
background: #00B0FF;
}
.choic {
vertical-align: middle;
line-height:100px;
text-align:center;
}
.choic li {
float: left;
width: 200px;
height: 100px;
list-style: none;
}
.button{
width:500px;
height:500px;
}
.current{
margin-top:110px;
}
.current li{
font-size:20px;
margin:20px 30px;
}
.current li a{
text-decoration:none;
color:black;
}
.current li a:hover {
text-decoration: underline;
color: #00B0FF;
}
.headcurrent{
background:white;
}
</style>
- 蔬菜
- 水果
<script>
$(".choic>li").mouseover(function () {
$(this).addClass("headcurrent").siblings().removeClass("headcurrent");
var index = $(this).index()
$(".bottom>ul").eq(index).show().siblings().hide();
});
</script>
`