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

发布时间：2018-08-21 10:05:47 所属栏目：政策来源：站长网

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

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

（编辑：上海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!