CSS常用菜单（三）

3、多级菜单

下面我们来实现如下图所示的多级菜单

html代码：

 

css代码：

<style type="text/css">

        body

        {

            margin: 0;

            padding: 30px;

            background: #FFF;

            color: #666;

            behavior: url(../Scripts/csshover.htc);

        }

        h1

        {

            font: bold 16px;

        }

        p

        {

            font: 11px;

        }

        a

        {

            color: #900;

            text-decoration: none;

        }

        a:hover

        {

            background: #900;

            color: #FFF;

        }

        /*CSS Code for Menu Begin:*/

        /* Root = Horizontal, Secondary = Vertical */

        ul#navmenu

        {

            margin: 0;

            border: 0 none;

            padding: 0;

            width: 500px; /*For KHTML*/

            list-style: none;

            height: 24px;

        }

        ul#navmenu li

        {

            margin: 0;

            border: 0 none;

            padding: 0;

            float: left; /*For Gecko*/

            display: inline;

            list-style: none;

            position: relative;

            height: 24px;

        }

        ul#navmenu ul

        {

            margin: 0;

            border: 0 none;

            padding: 0;

            width: 160px;

            list-style: none;

            display: none;

            position: absolute;

            top: 24px;

            left: 0;

        }

        ul#navmenu ul li

        {

            float: none; /*For Gecko*/

            display: block !important;

            display: inline; /*For IE*/

        }

        /* Root Menu */

        ul#navmenu a

        {

            border: 1px solid #FFF;

            border-right-color: #CCC;

            border-bottom-color: #CCC;

            padding: 0 6px;

            float: none !important; /*For Opera*/

            float: left; /*For IE*/

            display: block;

            background: #EEE;

            color: #666;

            font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;

            text-decoration: none;

            height: auto !important;

            height: 1%; /*For IE*/

        }

        /* Root Menu Hover Persistence */

        ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a

        {

            background: #CCC;

            color: #FFF;

        }

        /* 2nd Menu */

        ul#navmenu li:hover li a, ul#navmenu li.iehover li a

        {

            float: none;

            background: #EEE;

            color: #666;

        }

        /* 2nd Menu Hover Persistence */

        ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a

        {

            background: #CCC;

            color: #FFF;

        }

        /* 3rd Menu */

        ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a

        {

            background: #EEE;

            color: #666;

        }

        /* 3rd Menu Hover Persistence */

        ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a

        {

            background: #CCC;

            color: #FFF;

        }

        /* 4th Menu */

        ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a

        {

            background: #EEE;

            color: #666;

        }

        /* 4th Menu Hover */

        ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover

        {

            background: #CCC;

            color: #FFF;

        }

        ul#navmenu ul ul, ul#navmenu ul ul ul

        {

            display: none;

            position: absolute;

            top: 0;

            left: 160px;

        }

        /* Do Not Move - Must Come Before display:block for Gecko */

        ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul

        {

            display: none;

        }

        ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul

        {

            display: block;

        }

    </style>