CSS3 jQuery很实用的多级下拉菜单导航-插件特效-星河码客

这个CSS下拉菜单,没有任何额外的Javascript代码。没有使用,图像,和往常一样,最小的HTML标记。HTML结构正如你所看到的在第二行,HTML结构不包含超出我们所需要的,这是一个最小的一个,容易理解。

CSS#menu{ width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c;} #menu li{ float: left; padding: 0 0 10px 0; position: relative;} #menu a{ float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000;} #menu li:hover > a{ color: #fafafa;} *html #menu li a:hover /* IE6 */{ color: #fafafa;} #menu li:hover > ul{ display: block;} /* Sub-menu */ #menu ul{ list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 5px; border-radius: 5px;} #menu ul li{ float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;} #menu ul li:last-child{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} #menu ul a{ padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none;} *html #menu ul a /* IE6 */{ height: 10px; width: 150px;} *:first-child+html #menu ul a /* IE7 */{ height: 10px; width: 150px;} #menu ul a:hover{ background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba);} #menu ul li:first-child a{ -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;} #menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;} #menu ul li:first-child a:hover:after{ border-bottom-color: #04acec;} #menu ul li:last-child a{ -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;} /* Clear floated elements */#menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;} * html #menu { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */SS形状您可能已经注意到出现的三角形状的子菜单。CSS的形状和它的目的是增加对这个菜单的可用性。它是由使用 :after伪元素:#menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;} #menu ul li:first-child a:hover:after{ border-bottom-color: #04acec;}JS

CSS3 jQuery很实用的多级下拉菜单导航

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»