仿Opera中国红黑风格导航条,纯CSS下拉菜单[3]

　　在前边，我们介绍了关于纯CSS的菜单一与菜单二，现在给大家介绍的是仿Opera中国的纯CSS下拉菜单，此导航菜单源于今天Opera发布了10.60正式版，烈火在Opera下载浏览器时发现的，设计风格大气，样式美观，特别扣下来送给大家。

　　效果如下：

　　网页版：猛击这里

　　运行版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-cn" xml:lang="zh-cn"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /><br /> <title>红黑风格导航条,仿Opera中国纯CSS菜单[3] – Liehuo.Net</title><br /> <base href="http://www.veryhuo.com"><br /> <style type="text/css" /><br /> /* Clearing floats without extra markup */<br /> .section:after, .clear:after, #mainmenu:after {<br /> content: ".";<br /> display: block;<br /> height: 0;<br /> clear: both;<br /> visibility: hidden;<br /> }<br /> * html .clear,* html .section { height: 1%; }<br /> .clear, .section {display:block; clear:both;}<br /> a { text-decoration: none;}<br /> a img {outline:none;}<br /> /* Font */<br /> html body {font-size:12px;font-family: "<b>微软雅黑</b>", "宋体", "helvetica neue", "lucida grande", helvetica, arial, sans-serif;}<br /> h1, h2, h3, h4 {font-family: "微软雅黑","黑体","helvetica neue", "lucida grande", helvetica, arial, sans-serif;}<br /> html body #mainmenu li a {max-height:45px;}<br /> /* global */<br /> .article {font-size: 106%;line-height:1.4;min-height:420px;}<br /> #home #header,#brand,.reveal {display:none;}<br /> body #header h2 {color:#222; margin:.1em 0 .75em 0;}<br /> ul {list-style-image:url(‘/uploads/allimg/1007/bullet-red.gif’);}<br /> /* A block of content, placed on top of the branding images on home and product pages */<br /> .callout {width:44%; min-width:260px; overflow:hidden; padding:15px 10px 5px 24px; position:absolute;}<br /> .callout p {font-size:1.1em; line-height:1.4em; margin:0px 0 20px 0;}<br /> .callout h1 {letter-spacing:-1px;}<br /> .callout h1 a {text-decoration:none;}<br /> /* top menu */<br /> #nav ul#mainmenu {list-style:none inside none;padding:0 130px 0 20px;margin:0 0 16px -14px;background: url(‘/uploads/allimg/1007/all.png’) no-repeat 100% 0;height:70px;min-height:70px;height:auto !important;position:relative;z-index:998;}<br /> #nav ul#mainmenu li a {max-height:45px;}<br /> .billboard #nav ul#mainmenu {margin:0 0 0 -14px;background: url(‘/uploads/allimg/1007/all-tobg.png’) no-repeat 100% 0;height:65px;min-height:65px;height:auto !important;}<br /> #nav li {color:#fff;background:#900 url(‘/uploads/allimg/1007/all.png’) -60px -20px;position:relative;float:left;margin-top:20px;list-style-image: none;}<br /> #nav li a {display:block;line-height:45px;padding:0 15px;color:#fff;text-decoration:none;white-space:nowrap;}<br /> #nav li a:hover, #nav li.on ul a:hover, #nav li.on a, #nav li a:focus, #nav li a.sffocus, #products #nav .menu-products, #news #nav .menu-news, #discover #nav .menu-discover, #addons #nav .menu-addons, #developer #nav .menu-developer, #support #nav .menu-support, #about #nav .menu-about, #jobs #nav .menu-jobs, #business #nav .menu-business {background:transparent url(‘/uploads/allimg/1007/menu_over2.png’);text-shadow: #000 0px 1px 2px;}<br /> /* Top menu dropdowns */<br /> #nav li ul {position:absolute;z-index:999;min-width:150px;background:#222;color:#fff;opacity:0.98;top:45px;list-style:none;border-top:1px solid #555;margin:0 0 0 -999em;padding:0;background-image:none;}<br /> #nav li:hover ul, #nav li.sfhover ul {margin-left:0;}<br /> #nav li ul li {float:none;margin:0;padding:0;white-space:pre;border-bottom:1px solid #555;background-image:none;background:transparent;height:2.3em;}<br /> #nav li ul a, #nav li.on ul a {height:auto;color:#fff;border:0px;line-height:2.3em;display:block;background-image: none;float:none;width:80%;}<br /> #nav li ul li:hover, #nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {color:#fff;background-color:#900;}<br /> </style><br /> </head><br /> <body><br /> <div id="page"><br /> <div id="nav"><br /> <ul id="mainmenu"><br /> <li><a href="/">首页</a></li><br /> <li><a href="#">产品</a><br /> <ul><br /> <li><a href="#">Opera 桌面浏览器</a></li><br /> <li><a href="#">Opera Mini 手机浏览器</a></li><br /> <li><a href="#/">Opera Mobile 手机浏览器</a></li><br /> <li><a href="#">Opera 联网设备</a></li><br /> <li><a href="#">Opera 邮件服务</a></li><br /> <li><a href="#">Opera 蜻蜓</a></li><br /> <li><a href="#">Opera Widget</a></li><br /> <li><a href="#">Opera Unite</a></li><br /> </ul><br /> </li><br /> <li><a href="#">论坛</a><br /> <ul><br /> <li><a href="#26">新闻资讯</a></li><br /> <li><a href="#3">Opera 桌面版浏览器</a></li><br /> <li><a href="#58">Opera Mini 手机浏览器</a></li><br /> <li><a href="#60">Opera Mobile 手机浏览器</a></li><br /> <li><a href="#66">网络开发</a></li><br /> <li><a href="#49">社区活动</a></li><br /> <li><a href="#17">藕粉俱乐部</a></li><br /> </ul><br /> </li><br /> <li><a href="#">支持</a><br /> <ul><br /> <li><a href="#">开始使用</a></li><br /> <li><a href="#/">知识库</a></li><br /> <li><a href="#">报告 bug</a></li><br /> <li><a href="#">文档</a></li><br /> <li><a href="#">Opera 中文维基</a></li><br /> </ul><br /> </li><br /> <li><a href="/news/">新闻中心</a></li><br /> <li><a href="#/">开发者</a></li><br /> <li><a href="#">公司</a><br /> <ul><br /> <li><a href="#">关于 Opera</a></li><br /> <li><a href="/about/">关于 Opera 中国</a></li><br /> <li><a href="#company/investors/">投资人</a></li><br /> <li><a href="#smw/">移动互联网报告</a></li><br /> <li><a href="#company/jobs/">职业机会</a></li><br /> <li><a href="#company/vision/">理念</a></li><br /> <li><a href="#company/executive/">执行团队</a></li><br /> <li><a href="#company/history/">历史</a></li><br /> <li><a href="#company/contact/">联系</a></li><br /> </ul><br /> </li><br /> <li><a href="#business/">商务</a><br /> <ul><br /> <li><a href="#business/">概览</a></li><br /> <li><a href="#business/solutions/">解决方案</a></li><br /> <li><a href="#business/advantage/">Opera 的优势</a></li><br /> <li><a href="#business/customers/">客户</a></li><br /> <li><a href="#business/partners/">合作伙伴</a></li><br /> <li><a href="#business/associations/">协作方</a></li><br /> <li><a href="#business/gallery/">展览馆</a></li><br /> <li><a href="#business/awards/">奖项</a></li><br /> <li><a href="#business/newsletter/">新闻通讯</a></li><br /> <li><a href="#business/contact/">联系我们</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </body><br /> </html><br /> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href=’http://www.veryhuo.com/’ target=’_blank’>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!