随着内容分类的丰富,现在二级菜单得到越来越多的应用,有时候需要一个简单的二级菜单来完成各项功能,下面这个二级菜单效果比较简单,稍稍加了点渐隐。
默认的风格用了点Apple的影子,重要是给大家一点启示,可是修改CSS去制作各种不用样式的二级菜单,菜单最多支持两级,配合CSS,所以CSS也是很重要的。
演示地址:
下面看主要的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 }本文固定链接: https://www.weisay.com/blog/jquery-two-drop-down-menu.html | 威言威语
挺实用的,现在的二级菜单越来越多了。