css+html实现四级下拉菜单

/*对全局进行设置*/
*{margin:0px;padding:0px;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#000;}
a{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-decoration:none;border:1px solid ;color:#fff;background:#360;}
li{position:relative;}
ul{position:relative;list-style-type:none;}
/*对一级菜单进行设置,为什么这样做呢？因为第一级菜单是门面么，当然要好好做了*/
.menu ul li {float:left;}
/*对各级菜单的a标签进行设置,本身应该是对li进行设置的，但是由于我们在li里填充的只是a所以此时li和a是一体的，设置那个都可以*/
.menu ul li a{display:block;padding:2px 10px;}
.menu ul ul li a{display:block;padding:2px 10px;width:100px;height:15px;}
.menu ul ul ul li a{display:block;padding:2px 10px;width:100px;height:15px;}
.menu ul ul ul ul li a{display:block;padding:2px 10px;width:100px;height:15px;}
/*对各级菜单ul进行初始化*/
.menu ul{position:absolute;}
.menu ul ul{left:3px;top:20px;}
.menu ul ul ul{left:122px;top:0px;}
.menu ul ul ul ul{left:122px;top:0px;}
/*控制各级菜单的显示情况*/
.menu ul ul{visibility:hidden;}                                             /*设置二级菜单隐藏*/
.menu ul :hover ul{visibility:visible;  }                                /*一级的li的hover时，设置二级菜单可见*/
.menu ul :hover ul ul{visibility:hidden;}                                /*一级的li的hover时，设置三级菜单隐藏*/
.menu ul :hover ul :hover ul{visibility:visible; }                        /*一级二级菜单的li的hover时，设定3级菜单可见*/
.menu ul :hover ul :hover ul ul{visibility:hidden;}                  /*一级和二级的li的hover时，设置四级级菜单隐藏*/
.menu ul :hover ul :hover ul :hover ul{visibility:visible;}              /*一级二级三级菜单的li的hover时，设置四级菜单可见*/