威言威语

随着内容分类的丰富，有时候需要一个简单的二级菜单来完成各项功能，下面这个二级菜单效果比较简单，稍稍加了点渐隐。菜单最多支持两级，配合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
}