使用CSS制作4级下拉菜单

如今的web页面对下拉菜单的需求是越来越广泛了。从单纯的一层下拉菜单到多层菜单。下拉菜单的制作方式也非常多元化。在CSS还没有得到很好普及前，大家通常使用javascript来控制。以便达到下拉菜单的显示效果。由于javascript代码制作下拉菜单比较复杂，导致很多使用下拉菜单的web页面制作者的困惑。对定位。对色彩的控制都不能很容易的掌控。 随着css技术的普及和日益发展，使用css制作下拉菜单也逐渐得以推广。而且得到了广泛的应用。由于不使用任何javascript脚本控制，完全由css来控制，使得代码更加简洁并得以理解。下面我就给大家介绍一个纯css制作的4级下拉菜单

 

<style type="text/css">
/**/ /*<![CDATA[*/
body {...} { font:normal 9pt verdana,sans-serif;color:#000;}

.menu  {...} {
height:150px;
font-size:90%;
margin:25px 0 50px 15px; /**//* this page only */
}

/**/ /* remove all the bullets, borders and padding from the default list styling */
.menu ul  {...} {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/**/ /* style the list items */
.menu li  {...} {
background:#d4d8bd;
height:26px;
/**//* for IE7 */
float:left;
}
.menu li.sub  {...} { background:#d4d8bd url(http://www.programmer.com.cn/images/sub.gif) no-repeat right center;}  

/**/ /* get rid of the table */
.menu table  {...} { position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}