经典的蓝色CSS下拉菜单

2024-09-05 12:20:32

字体：大中小

来源：转载

供稿：网友

纯CSS代码实现比较经典的蓝色风格下拉菜单，最多支持两级，适用于各种企业网站，新闻资讯类网站，效果挺棒的，不是吗？虽然没有用到过多的修饰，但给你的感觉清新、大方、简洁，符合现代网站的特点。

<html><title>经典的蓝色CSS下拉菜单</title><style>*{margin:0;padding:0;border:0;}#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;}  #nav { line-height: 20px; list-style-type: none; margin-top:5px;} #nav a { display: block; width: 77px; text-align:center; font-size:12px;} #nav a:link  { color:#FFF; text-decoration:none;margin:0;} #nav a:visited  {color:#FFF;text-decoration:none;margin:0;}#nav a:hover {color:#C00;text-decoration:none;}#nav li {float: left;}#nav li a:hover{background:#FFFFFF;} #nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;} #nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;} #nav li ul a:link  {color:#0d5097; text-decoration:none;}  #nav li ul a:visited  {color:#0d5097;text-decoration:none;}  #nav li ul a:hover  {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}#nav li:hover ul {left: auto;}#nav li.sfhover ul {left: auto;}#content {clear: left;}</style><body><script type=text/javascript></script><div id=div_center><UL id=nav><LI style="MARGIN-LEFT: 10px">主站索引</LI><LI>新闻中心 <UL><LI>·新闻中心1</LI><LI>·新闻中心3</LI></UL></LI><LI>企业简介 <UL><LI>·企业简介</LI><LI>·产品中心</LI><LI>·服务专区</LI></UL></LI><LI>文章中心 <UL><LI>·文章中心</LI><LI>·文章中心</LI></UL></LI><LI>国际新闻 <UL><LI>国际新闻</LI><LI>国内新闻</LI><LI>科技新闻</LI></UL></LI><LI>图片新闻 <UL><LI>·图片中心</LI><LI>·图片中心</LI></UL></LI><LI>下载中心 <UL><LI>·常用软件</LI><LI>·文档下载</LI><LI>社区论坛</LI></UL></div></body></html>

上一篇：纯CSS下拉菜单，Aspku.com整理

下一篇：类似Windows风格的导航菜单，CSS+JavaScript实现