Trang Chính
![[chia sẻ]thanh navbar của OPERA Image-7CE0_4ECA73FD](https://2img.net/h/imageschip.com/image-7CE0_4ECA73FD.jpg)
Posts
SDPoints
Thanked
Tham Gia![[chia sẻ]thanh navbar của OPERA Empty](https://2img.net/i/empty.gif)
- Code:
<style type="text/css">
/* top menu */
#nav ul#mainmenu {list-style:none inside none;padding:0 274px 0 26px;margin:0 -2px 16px -2px;background:url('http://www.opera.com/bitmaps/mainmenu/menu.png') no-repeat 100% 100%;height:72px;min-height:72px;height:auto !important;position:relative;z-index:998;}
#nav ul#mainmenu li a {max-height:33px;}
#nav li {color:#fff;position:relative;float:left;margin-top:32px;list-style-image:none;}
#nav li span {background-color:#2c2c2c;background-color:rgba(44,44,44,0.5);}
#nav li.dl span {background-color:transparent;text-decoration:underline;}
#nav li a {display:block;padding:0 18px;height:33px;color:#fff;text-decoration:none;white-space:nowrap;}
#nav li.on, #nav li:hover, #nav li:focus {background:transparent url('http://www.opera.com/bitmaps/mainmenu/over.png') no-repeat 50% 100%;}
#nav li.support {text-indent:-999em;width:17px;float:right;}
#nav li.support a {background:url('http://www.opera.com/bitmaps/mainmenu/support_01.png') no-repeat 0 0;padding:0;}
#nav li.support a:hover, #nav li.support a:focus {background-position:-17px 0;}
/* Top menu dropdowns */
#nav li ul {
position:absolute;
z-index:999;
min-width:150px;
background-color:#CC0F16;
color:#fff;
top:33px;
list-style:none;
margin:0 0 0 -999em;
padding:5px 0;
background-image:none;
opacity:0;
transition:opacity 0.25s ease-out;
-o-transition:opacity 0.25s ease-out;
display:none;
}
#nav li:hover ul, #nav li:active ul, #nav li:focus ul, #nav li.sfhover ul {
margin-left:0;
opacity:1;
display:block;
}
#nav li ul li,#nav li ul li:hover,#nav li ul li:focus {
min-width:180px;
font-size:11px;
float:none;
margin:0;
padding:0;
background:transparent none;
}
#nav li ul li + li {
border-top:1px dotted #FF473F;
border-collapse:collapse;
}
#nav li ul a, #nav li.on ul a {
padding:1em 3em 1em 1.5em;
margin:0;
height:auto;
color:#fff;
line-height:1em;
display:block;
background-image:none;
}
#nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {
color:#fff;
background-color:#900;
background-image:none;
}
#nav li ul li.dl {
border:0;
background-color:#333;
}
#nav li ul li.dl a {
background:#444 url('http://www.opera.com/bitmaps/mainmenu/dlcircle.png') no-repeat 97% 12px;
}
#nav li ul li.dl {
border-top:1px dotted #666;
}
#nav li ul li.dl:hover, #nav li ul li.dl:hover a {
background-color:#900;
background-position:97% -28px;
}
#nav li ul li.dl b {
display:block;
}
#operamenu {width:968px;margin:0 auto; padding-top: 3px;font: normal 12px Tahoma;}
</style>
<div id="operamenu"><div id="nav"><ul id="mainmenu"><li class="home"><a href="/" accesskey="1"><span>Home</span></a> </li><li class="products"><a href="/products/" accesskey="2"><span>Browsers</span></a><ul class="hide-mobile">
<li><a href="/browser/">Opera for PC, Mac & Linux</a></li>
<li><a href="/mobile/">Opera for phones</a></li>
<li><a href="/devices/">Opera for devices</a></li>
<li class="dl"><a href="/browser/download/">
<b>Opera 10.62</b>
Download Opera</a></li>
<li class="dl mobile"><a href="/mobile/download/">
<b>Mobile phones</b>
visit <span>m.opera.com</span> with your phone</a></li>
</ul> </li><li class="addons"><a href="/addons/" accesskey="3"><span>Add-ons</span></a><ul class="hide-mobile">
<li><a href="http://unite.opera.com/applications">Opera Unite</a></li>
<li><a href="/widgets/">Opera Widgets</a></li>
<li><a href="/link/">Opera Link</a></li>
<li><a href="/mail/">Opera Mail</a></li>
<li><a href="/turbo/">Opera Turbo</a></li>
</ul> </li><li class="community"><a href="/community/" accesskey="4"><span>Community</span></a><ul class="hide-mobile">
<li><a href="http://my.opera.com/community/">My Opera</a></li>
<li><a href="http://my.opera.com/chooseopera/blog/">Opera news blog</a></li>
<li><a href="/company/education/">Education</a></li>
<li><a href="http://my.opera.com/community/forums/">Forums</a></li>
</ul> </li><li class="developer"><a href="/developer/" accesskey="5"><span>Developer</span></a><ul class="hide-mobile">
<li><a href="/developer/tools/">Developer tools</a></li>
<li><a href="/developer/events/">Events</a></li>
<li><a href="/dragonfly/">Opera Dragonfly</a></li>
<li><a href="/developer/wsc/">Web Standards Curriculum</a></li>
<li><a href="/docs/specs/">Web specifications support in Opera</a></li>
<li><a href="http://dev.opera.com/">Dev Opera</a></li>
</ul> </li><li class="company"><a href="/company/" accesskey="6"><span>Company</span></a><ul class="hide-mobile">
<li><a href="/company/">About Opera</a></li>
<li><a href="/press/">Press</a></li>
<li><a href="/business/">Business</a></li>
<li><a href="/company/jobs/">Jobs</a></li>
<li><a href="/company/investors/">Investors</a></li>
<li><a href="/smw/">State of the Mobile Web</a></li>
<li><a href="/company/events/">Events</a></li>
<li><a href="/company/contact/">Contact</a></li>
</ul> </li><li class="support"><a href="/support/" title="Support">Support</a></li></ul></div>
demo: http://a1tinhgia3.co.cc/html-h46.htm
No Comment.