可分级的CSS+JS竖直菜单

2024-09-05 12:19:31

字体：大中小

来源：转载

供稿：网友

可以分级的CSS+JS竖直菜单，一般用到网页两侧，这款菜单不会自动展开和折叠，有多少级显示多少级，不过代码超简单，帮助你学习CSS还可以。颜色什么的自己修改一下还是不错的，还有字体。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>竖直菜单</title><style type="text/css">#navcontainer { margin-left: 30px; } #navcontainer ul { margin: 0; padding: 0; list-style-type: none; font-family: verdana, arial, Helvetica, sans-serif; } #navcontainer li { margin: 0; } #navcontainer a { display: block; padding: 5px 10px; width: 140px; color: #000; background-color: #ADC1AD; text-decoration: none; border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #333; border-right: 1px solid #333; font-weight: bold; font-size: .8em; background-repeat: no-repeat; background-position: 0 0; } #navcontainer a:hover { color: #000; background-color: #889E88; text-decoration: none; border-top: 1px solid #333; border-left: 1px solid #333; border-bottom: 1px solid #fff; border-right: 1px solid #fff; background-repeat: no-repeat; background-position: 0 0; } #navcontainer ul ul li { margin: 0; } #navcontainer ul ul a { display: block; padding: 5px 5px 5px 30px; width: 125px; color: #000; background-color: #C5D8C5; text-decoration: none; font-weight: normal; } #navcontainer ul ul a:hover { color: #000; background-color: #889E88; text-decoration: none; } </style></head><body><div id="navcontainer"> <ul id="navlist"> <li id="active">AJAX  <ul id="subnavlist"> <li id="subactive">ASP</li> <li>PHP</li> <li>JSP</li> <li>ASP.NET</li> </ul> </li> <li>网页特效</li> <li>最新更新</li> <li>下载排行</li> </ul> </div> </body></html>

上一篇：固定在右侧的CSS导航菜单

下一篇：带缺口指向的横向纯CSS菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注