很靓很大气的简约红色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

posted @   网页代码站  阅读(499)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
阅读排行:
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 本地部署 DeepSeek:小白也能轻松搞定!
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)
点击右上角即可分享
微信分享提示