很靓很大气的简约红色CSS菜单代码
代码简介:
一款漂亮的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菜单代码_网页代码站(www.webdm.cn)</ title > < meta http-equiv="Content-Type" content="text/html; charset=gb2312"> < style > .menucontainer{background: #fff url(http://www.webdm.cn/images/20090922/bgOFF.gif) no-repeat bottom left;} .menu {float:left;font-family: arial,verdana,sans-serif;width:100%;position:relative;font-size:11px;font- weight:bold; background:url(http://www.webdm.cn/images/20090922/bgOFF.gif) repeat-x bottom left;border-top:4px solid #B30000;} .menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;} .menu ul li {float:left;position:relative;display:inline;background:url (http://www.webdm.cn/images/20090922/bgDIVIDER.gif) no-repeat bottom right;} .menu ul li a, .menu ul li a:visited {float:left;display:block;text- decoration:none;color:#000;width:auto;color:#666;padding:0px 16px 0px 16px;line-height:40px;height:40px;} * html .menu ul li a, .menu ul li a:visited {width:auto;w\idth:auto;} .menu ul li ul {display:none;} .menu ul li ul li{background:none;} table {margin:-1px;border-collapse:collapse;font-size:11px;} .menu ul li:hover a {color:#B30000;background: transparent url(http://www.webdm.cn/images/20090922/bgON.gif) bottom left repeat-x;} .menu ul li:hover ul {display:block;position:absolute;top:36px;margin-top:1px;left:0;width:100%;border-top:1px solid #fff;} .menu ul li:hover ul li a {display:block;background:#e3e3e3;color:#333;height:auto;line-height:16px;padding:2px 16px 2px 16px;width:120px;border-top:1px solid #fff;} .menu ul li:hover ul li a:hover {color:#fff;background: #B30000 url(http://www.webdm.cn/images/20090922/sub- arrow.gif) no-repeat;background-position: 4px 8px;} </ style > </ head > < body > < div class="menucontainer"> < div class="menu"> < ul > < li >< a href="/" target="_blank">Home</ a ></ li > < li >< a href="#" target="_self">About us</ a ></ li > < li >< a class="drop" href="#" target="_self">Services <!--[if IE 7]><!--> </ a > <!--<![endif]--> < table >< tr >< td > < ul >< li >< a href="#" target="_self">Design</ a ></ li >< li >< a href="#" target="_self">Strategy</ a ></ li >< li >< a href="#" target="_self">Analysis</ a ></ li ></ ul ></ td ></ tr ></ table > <!--[if lte IE 6]> </a> <![endif]--> </ li > < li >< a href="/" target="_self">Support</ a ></ li > < li >< a href="/" target="_self">Forums</ a ></ li > < li >< a href="/" target="_self">Contact Us</ a ></ li > </ ul > </ div > </ div > <!-- END Menu --> </ body > </ html > < br > < p >< a href="http://www.webdm.cn">网页代码站</ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</ p > |
代码来自:http://www.webdm.cn/webcode/e9614df6-97cd-4394-bf43-8d6ae3b437c9.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 本地部署 DeepSeek:小白也能轻松搞定!
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)