一個綠色網(wǎng)頁菜單，效果如下，網(wǎng)上可下載到該資源；

下面研究其css代碼；這是一個比較復(fù)雜的菜單；可學(xué)到很多東西；

/* menu::base */ div#menu {height: 46px;padding-left: 10px;background: url(images/left.png) no-repeat;_background-image: url(images/left.gif);width:auto; }div#menu ul {margin: 0;padding: 0;list-style: none;float: left; } div#menu ul.menu {padding-right: 10px;background: url(images/right.png) no-repeat right 0;_background-image: url(images/right.gif); }div#menu li {position: relative;margin: 0;padding: 0 0 0 0;display: block;float: left;z-index: 9;width: auto; } div#menu ul ul li {z-index: 9; } div#menu li div {list-style: none;float: left;position: absolute;z-index: 11;top: 36px;left: 0;visibility: hidden;width: 187px;padding: 0 0 11px 7px;background: url(images/submenu-bottom.png) no-repeat 7px bottom;_background-image: url(images/submenu-bottom.gif);margin: 0px 0 0 -4px; } div#menu li:hover>div {visibility: visible; }div#menu a {position: relative;z-index: 10;height: 41px;display: block;float: left;line-height: 41px;text-decoration: none;margin-top: 1px;white-space: nowrap;width: auto;padding-right: 5px;text-align: center; } div#menu span {display: block;cursor: pointer;background-repeat: no-repeat;background-position: 95% 0;text-align: center; }/* menu::level1 */ div#menu a {padding: 0 30px 0 0;line-height: 40px;height: 46px;margin-right: 5px;_margin-right: 1px;background: none; } div#menu span {margin-top: 2px;padding-left: 30px;color: #fff;font: bold 11px Trebuchet MS,Arial,san-serif;background: none;line-height: 40px; } div#menu a:hover, div#menu a.over {background: url(images/selected-right-sub.png) no-repeat right -1px;_background-image: url(images/selected-right-sub.gif); } div#menu a:hover span, div#menu a.over span {background: url(images/selected-left-sub.png) no-repeat 0 -3px;_background-image: url(images/selected-left-sub.gif); } div#menu li.current a, div#menu ul.menu>li:hover>a {background: url(images/selected-right-sub.png) no-repeat right -1px;_background-image: url(images/selected-right-sub.gif); } div#menu li.current a span, div#menu ul.menu>li:hover>a span {background: url(images/selected-left-sub.png) no-repeat 0 -3px;_background-image: url(images/selected-left-sub.gif); } div#menu ul.menu>li:hover>a span {color: #3d4e29; } div#menu li { } div#menu li.last { background: none; }div#menu li.current a, div#menu li.current a span, div#menu.js-active a:hover, div#menu.js-active a:hover span, div#menu.js-active a, div#menu.js-active span {background:none; } div#menu.js-active ul.menu>li:hover>a, div#menu.js-active ul.menu>li:hover>a span {background:none; } div#menu li.current a.over {background: url(images/selected-right-sub.png) no-repeat right -1px;_background-image: url(images/selected-right-sub.gif); } div#menu li.current a.over span {background: url(images/selected-left-sub.png) no-repeat 0 -3px;_background-image: url(images/selected-left-sub.gif); } div#menu a.over span {color: #3d4e29; }/* menu::level2 */ div#menu ul ul li {background: none;padding: 0; } div#menu ul ul {padding-top: 10px; } div#menu ul ul a {padding: 0;height: auto;float: none;display: block;line-height: 26px;font-size: 11px;color: #d8ebc5;z-index: -1;padding-left: 5px;white-space: normal;width: 160px;margin: 0 5px;text-transform: none; }div#menu ul ul a span {padding: 0 15px;line-height: 26px;font-size: 11px; } div#menu li.current ul a, div#menu li.current ul a span {background:none; } div#menu ul ul a:hover {background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom; } div#menu ul ul a:hover span {background: url(images/submenu-selected-top.png) no-repeat 0 0; } div#menu ul ul a.parent {background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom; } div#menu ul ul a.parent span {background: url(images/submenu-pointer-top.png) no-repeat 0 0; } div#menu ul ul a.parent:hover {background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom; } div#menu ul ul a.parent:hover span {background: url(images/submenu-selected-top.png) no-repeat 0 0; } div#menu ul ul span {margin-top: 0;text-align: left; } div#menu ul ul li.last { background: none; } div#menu ul ul li {width: 100%; }/* menu::level3 */ div#menu ul ul div {width: 180px;padding: 15px 0px 8px 0px;margin: -44px 0 0 169px !important;background: url(images/subsubmenu-top.png) no-repeat 0px 0;_background-image: url(images/subsubmenu-top.gif); } *+html div#menu ul ul div { height:10px } *+html div#menu.ie7 ul ul div { height:auto } div#menu ul ul ul {padding: 0 4px 5px 1px;background: url(images/submenu-bottom.png) no-repeat 0px bottom;_background-image: url(images/submenu-bottom.gif); } div#menu ul ul div li {position:relative;top:-5px; }/* lava lamp */ div#menu li.back {background: url(images/lavalamp-left.png) no-repeat 0 0;_background-image: url(images/lavalamp-left.gif);width: 10px;height: 46px;z-index: 8;position: absolute;padding: 0;margin: 0; }div#menu li.back .left {padding:0;width:auto;background: url(images/lavalamp-right.png) no-repeat right 0;_background-image: url(images/lavalamp-right.gif);height: 46px;margin: 0 5px 0 10px;_margin-right: 2px;float: none;position: relative;top: 0;left: 0;visibility: visible; }
定義id為menu的div的樣式
定義id為menu的div中的ul的樣式
定義id為menu的div中的，使用“menu”為css類的ul的樣式
定義id為menu的div中的li的樣式
定義id為menu的div中的ul中的ul中的li的樣式
定義id為menu的div中的li中的div的樣式
定義id為menu的div中的li當(dāng)鼠標(biāo)懸停時li下的div的樣式
定義id為menu的div中的a的樣式
定義id為menu的div中的span的樣式
定義id為menu的div中的a的樣式
定義id為menu的div中的span的樣式
定義id為menu的div中的a當(dāng)鼠標(biāo)懸停時的樣式, a下的over css類的樣式
定義id為menu的div中的a當(dāng)鼠標(biāo)懸停時 中的span的樣式，a下的over css類中的span的樣式
定義id為menu的div中的li下的current css類中的a的樣式，
定義id為menu的div中的ul下的menu css類下的li，li當(dāng)鼠標(biāo)懸停時下的a的樣式
定義id為menu的div中的li下的current css類 中的a中的span的樣式
定義id為menu的div中的ul下的menu css類下的li當(dāng)鼠標(biāo)懸停時下的a中的span的樣式


定義id為menu的div中的ul下的menu css類下的li當(dāng)鼠標(biāo)懸停時下的a中的span的樣式
定義id為menu的div中的li的樣式
定義id為menu的div中的li下的last css類的樣式


定義id為menu的div中的li下的current css類中的a,
定義id為menu的div中的li下的current css類中的a中的span,
定義id為menu的div下的js-active css類中的a當(dāng)鼠標(biāo)懸停時，
定義id為menu的div下的js-active css類中的a當(dāng)鼠標(biāo)懸停時中的span，
定義id為menu的div下的js-active css類中的a,
定義id為menu的div下的js-active css類中的a中的span的樣式；


定義id為menu的div下的js-active css類中的ul下li鼠標(biāo)懸停時下的a,
定義id為menu的div下的js-active css類中的ul下li鼠標(biāo)懸停時下的a中的span的樣式


定義id為menu的div下的li下的current css類中的a下的over類的樣式
定義id為menu的div下的li下的current css類中的a下的over類的中的span的樣式
定義id為menu的div中的a下的over類中的span的樣式


/* menu::level2 */
定義id為menu的div中的ul中的ul中的li的樣式
定義id為menu的div中的ul中的ul的樣式
定義id為menu的div中的ul中的ul的a的樣式
定義id為menu的div中的ul中的ul的a中的span的樣式
定義id為menu的div中的li下的current類中的ul中的a,
定義id為menu的div中的li下的current類中的ul中的a中的span的樣式
...
...
定義a中的parent類
...
...
...
...
ul中的ul中的li下的last類


/* menu::level3 */


/* lava lamp */
定義id為menu的div中的li中的back類
定義id為menu的div中的li下的back類 中的left類

使用了甚多的css選擇器和偽類等；

總結(jié)

以上是生活随笔為你收集整理的一个网页菜单的CSS代码分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。