随着内容分类的丰富,有时候需要一个简单的二级菜单来完成各项功能,下面这个二级菜单效果比较简单,稍稍加了点渐隐。菜单最多支持两级,配合CSS,所以CSS也是很重要的。

随着内容分类的丰富,现在二级菜单得到越来越多的应用,有时候需要一个简单的二级菜单来完成各项功能,下面这个二级菜单效果比较简单,稍稍加了点渐隐。

默认的风格用了点Apple的影子,重要是给大家一点启示,可是修改CSS去制作各种不用样式的二级菜单,菜单最多支持两级,配合CSS,所以CSS也是很重要的。

演示地址: VIEW DEMO下面看主要的CSS代码:.vvsmoothmenu { margin: 0px auto; font: 12px verdana; width: 730px.vvsmoothmenu ul { padding-right: 0px; padding-left: 0px;background: #4e4e4e;background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,0.4)),to(rgba(59,59,59,1)));background: -moz-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));background: -ms-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));background: -o-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1)); z-index: 100; float: left; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none.vvsmoothmenu ul li { display: block; float: left; width: 108px; line-height: 36px; position: relative; text-align: center html .vvsmoothmenu ul li { float: left; width: 108px; line-height: 36px; position: relative; text-align: center; border-right:1px #777 solid;.vvsmoothmenu ul li a { display: block; font-weight: bold; width: 108px; text-decoration: none.vvsmoothmenu ul li a:link { color: #fff.vvsmoothmenu ul li a:visited { color: #fff.vvsmoothmenu ul li a:hover { color: #ccc.vvsmoothmenu ul li ul { left: 0px; visibility: hidden; position: absolute.vvsmoothmenu ul li ul li { background:#4e4e4e; float: left; width: 108px; line-height: 30px; border-bottom: #777 1px solid;border-right:1px #555 solid;.vvsmoothmenu ul li ul li a { display: block; width: 108px; text-decoration: none.vvsmoothmenu ul li ul li a:hover { background: #555.vvsmoothmenu ul li ul li ul { top: 0px.downarrowclass { display: none; position: absolute.rightarrowclass { display: none; position: absolute.ddshadow { background: silver; left: 0px; width: 0px; position: absolute; top: 0px; height: 0px.toplevelshadow { opacity: 0.8