模仿Windows颜色的竖向多级CSS菜单

2024-09-05 12:19:50

字体：大中小

来源：转载

供稿：网友

和Windows窗体颜色相似的竖向多级CSS菜单，看上去还不错哦，毕竟是用纯CSS代码实现，符合W3C标准，兼容性也不错，滑过变色，操作体验很好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312"><head><title>和Windows窗体颜色相似的竖向多级CSS菜单</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>#navcontainer { margin-left: 30px; } #navcontainer ul { margin: 0; padding: 0; list-style-type: none; font-family: 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; 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">网站主页  <ul id="subnavlist"> <li id="subactive">软件下载</li> <li>ASP源码</li> <li>PHP源码</li> <li>.NET源码</li> </ul> </li> <li>网页特效</li> <li>最新更新</li> <li>关注排行</li> </ul> </div></body></html>

上一篇：新手学CSS写的滑动变色菜单

下一篇：Vista风格菜单，完全CSS实现

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注