<!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>css实现2级菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
ul,li,a{list-style:none;text-decoration:none;}
.nav{margin:100px 0 50px 0;width:110px;}
.nav a{display:block;width:110px;height:36px;line-height:36px;text-align:center;color:#000;background:#999;}
.nav a:hover{background:#F00;}
.li1{position:relative;}
.li2{position:absolute;left:109px;top:0px;width:110px;height:36px;text-align:center;color:#000;background:#999;display:none;}
.li1:hover .li2{display:block;}
.li2:hover{background:#999;}
</style>
</head>
<body>
<ul class="nav">
<li class="li1">
<a href="">水果</a>
<ul class="nav2">
<li class="li2"><a href="">苹果</a></li>
<li class="li2"><a href="">香蕉</a></li>
</ul>
</li>
<li class="li1">
<a href="">蔬菜</a>
<ul class="nav2">
<li class="li2"><a href="">土豆</a></li>
<li class="li2"><a href="">白菜</a></li>
</ul>
</li>
<li class="li1">
<a href="">玩具</a>
<ul class="nav2">
<li class="li2"><a href="">汽车</a></li>
<li class="li2"><a href="">飞机</a></li>
</ul>
</li>
</ul>
</body>
</html>
display_none