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

代码语言：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;
            BORDER-LEFT: #779e25 1px solid;
            TOP: 23px
        }
        #nav A:hover UL {
            LEFT: -1px
        }
        #nav UL {
            LEFT: -9999px;
            POSITION: absolute;
            TOP: -9999px
        }
        #nav LI:hover LI:hover > UL {
            LEFT: 0px;
            MARGIN-LEFT: 100%;
            TOP: 0px
        }
        #nav LI:hover > UL UL {
            LEFT: -9999px;
            WIDTH: auto;
            POSITION: absolute;
            TOP: -9999px
        }
        #nav LI:hover LI:hover > A {
            BACKGROUND: #779e25;
            BORDER-LEFT: #779e25 1px solid;
            COLOR: #fff
        }
        #nav LI A:hover UL LI A:hover {
            BACKGROUND: #779e25
        }
        #nav A:hover A:hover UL {
            LEFT: 100%;
            TOP: 0px
        }
        #nav A:hover A:hover A:hover UL {
            LEFT: 100%;
            TOP: 0px
        }
        #nav A:hover A:hover A:hover A:hover UL {
            LEFT: 100%;
            TOP: 0px
        }
        #nav A:hover A:hover A:hover A:hover A:hover UL {
            LEFT: 100%;
            TOP: 0px
        }
        #nav A:hover UL UL {
            LEFT: -9999px;
            POSITION: absolute;
            TOP: -9999px
        }
        #nav A:hover A:hover UL UL {
            LEFT: -9999px;
            POSITION: absolute;
            TOP: -9999px
        }
        #nav A:hover A:hover A:hover UL UL {
            LEFT: -9999px;
            POSITION: absolute;
            TOP: -9999px
        }
        #nav A:hover A:hover A:hover A:hover UL UL {
            LEFT: -9999px;
            POSITION: absolute;
            TOP: -9999px
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#"><!--[if gte IE 7]><!-->菜单一</a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="#">演示菜单</a></li>
                <li><a href="#">演示菜单</a></li>
                <li><a href="#">演示菜单</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="#">菜单二&raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="#">演示菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li><a href="#">演示菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                        <li><a href="#">演示菜单</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li><a href="#">演示菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                        <li><a href="#">演示菜单 &raquo;<!--[if gte IE 7]><!--></a><!--<![endif]-->
                            <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                                <li><a href="#">演示菜单</a></.........完整代码请登录后点击上方下载按钮下载查看

纯css实现多级菜单效果

网友评论0

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码

div+css实现下拉菜单代码

div+css实现左侧悬浮伸缩菜单代码

div+Css实现手风琴二级菜单折叠效果代码

div+css实现二级下拉菜单导航效果代码