[Code] Thanh navbar của OPERA

vừa chôm chỉa được thanh navbar của opera (nhìn khá đẹp nên chôm về )

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://[url=http://www.opera.com/bitmaps/mainmenu/menu.png%27%29]www.opera.com/bitmaps/mainmenu/menu.png')[/url] 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://[url=http://www.opera.com/bitmaps/mainmenu/over.png%27%29]www.opera.com/bitmaps/mainmenu/over.png')[/url] no-repeat 50% 100%;}
#nav li.support {text-indent:-999em;width:17px;float:right;}
#nav li.support a {background:url('http://[url=http://www.opera.com/bitmaps/mainmenu/support_01.png%27%29]www.opera.com/bitmaps/mainmenu/support_01.png')[/url] 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://[url=http://www.opera.com/bitmaps/mainmenu/dlcircle.png%27%29]www.opera.com/bitmaps/mainmenu/dlcircle.png')[/url] 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 &amp; 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>