CSS 竖排背景渐变的菜单

2024-09-05 12:19:52

字体：大中小

来源：转载

供稿：网友

CSS 竖排背景渐变的菜单，具备高光效果。和以前的一款竖向菜单差不多，这一款使用了背景图片，外观更好看一些，请顺着代码找到背景图地址并下载。

<!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"><head><title>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: 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-image: url(http://www.codefans.net/jscss/demoimg/200905/vertical06.jpg);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-image: url(http://www.codefans.net/jscss/demoimg/200905/vertical06a.jpg);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>菜单导航</li><li>层和布局</li><li>表单按钮</li></ul></li><li>源码下载</li><li>最新更新</li><li>下载排行</li></ul></div></body></html>

上一篇：精致纯CSS导航栏

下一篇：CSS竖向菜单，多级展开

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注