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

发布时间：2018-08-19 13:58:10 所属栏目：创业来源：站长网

导读：在前边，我们先容了关于纯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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如