纯css实现多级菜单效果-html代码-BFW代码库

纯css实现多级菜单效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>纯CSS多级透明菜单</title>
    <style>
        #nav {
            PADDING-RIGHT: 0px;
            PADDING-LEFT: 0px;
            Z-INDEX: 100;
            BACKGROUND: #999999;
            PADDING-BOTTOM: 0px;
            MARGIN: 0px;
            FONT: 16px;
            PADDING-TOP: 0px;
            LIST-STYLE-TYPE: none;
            POSITION: relative
        }
        #nav UL {
            PADDING-RIGHT: 0px;
            PADDING-LEFT: 0px;
            Z-INDEX: 100;
            BACKGROUND: #999999;
            PADDING-BOTTOM: 0px;
            MARGIN: 0px;
            FONT: 14px;
            PADDING-TOP: 0px;
            LIST-STYLE-TYPE: none;
            POSITION: relative
        }
        #nav {
            PADDING-RIGHT: 0px;
            PADDING-LEFT: 0px;
            BACKGROUND: #528e34;
            PADDING-BOTTOM: 0px;
            WIDTH: 740px;
            PADDING-TOP: 0px;
            HEIGHT: 30px
      
        }
        #nav TABLE {
            BORDER-COLLAPSE: collapse
        }
        #nav LI {
            FLOAT: left
        }
        #nav LI LI {
            FLOAT: none
        }
        #nav LI A LI {
            FLOAT: left
        }
        #nav LI A {
            PADDING-RIGHT: 20px;
            DISPLAY: block;
            PADDING-LEFT: 10px;
            FONT-WEIGHT: bold;
            FLOAT: left;
            PADDING-BOTTOM: 0px;
            BORDER-LEFT: #528e34 1px solid;
            COLOR: #fff;
            LINE-HEIGHT: 22px;
            PADDING-TOP: 0px;
            WHITE-SPACE: nowrap;
            HEIGHT: 30px;
            TEXT-DECORATION: none
        }
        #nav LI LI A {
            FLOAT: none;
            LINE-HEIGHT: 20px;
            HEIGHT: 21px
        }
        #nav LI:hover {
            Z-INDEX: 100;
            POSITION: relative
        }
        #nav A:hover {
            Z-INDEX: 100;
            BACKGROUND: #779e25;
            BORDER-LEFT: #779e25 1px solid;
            COLOR: #fff;
            POSITION: relative
        }
        #nav LI:hover > A {
            BACKGROUND: #779e25;
            BORDER-LEFT: #779e25 1px solid;
            COLOR: #fff
        }
        #nav :hover UL {
            Z-INDEX: 300;
            LEFT: 0px;
      .........完整代码请登录后点击上方下载按钮下载查看