Css Modern DropDown Menü - Açılır Menü

<ul id='hb-menu'>
<li><a href='http://wmuzmani.blogspot.com'>Ana Sayfa</a></li>
<li> 
<a href='http://wmuzmani.blogspot.com/2012/11/wmuzmani-tantm-yazs.html'>Hakkımda</a> 

</li>
<li><a href='#'>Hazır Sistemler</a> 
<ul>
<li><a href='http://wmuzmani.blogspot.com/search/label/Blogger'>Blogger</a></li>
<li><a href='http://wmuzmani.blogspot.com/search/label/WordPress'>WordPress</a></li>
<li><a href='#'>VBullettin</a></li>
<li><a href='#'>MyBB</a></li>
</ul>
</li>
<li><a href='#'>Web Programlama</a> 
<ul>
<li><a href='http://wmuzmani.blogspot.com/search/label/HTML'>HTML</a></li>
<li><a href='http://wmuzmani.blogspot.com/search/label/CSS'>CSS</a></li>
<li><a href='#'>JavaScript</a></li>
<li><a href='#'>PHP</a></li>
</ul>
</li>
<li><a href='#'>Web Editörleri</a> 
<ul>
<li><a href='#'>Flash 8</a></li>
<li><a href='#'>Dreamweawer 8</a></li>
<li><a href='#'>Fireworsk 8</a></li>
</ul>
</li>
<li><a href='http://wmuzmani.blogspot.com/search/label/Videolu%20Anlat%C4%B1m'><u><u>Videolu Anlatımlar</u></u></a> </li>
<li><a href='http://wmuzmani.blogspot.com/p/arsiv.html'><u>Arşiv</u></a> </li>
</ul>

#hb-menu, #hb-menu ul { 
margin: 0; 
padding: 0; 
list-style: none; 
} 
#hb-menu { 
width: 900px; 
margin: auto; 
border: 1px solid #222; 
background-color: #111; 
background-image: -moz-linear-gradient(#444, #111); 
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); 
background-image: -webkit-linear-gradient(#444, #111); 
background-image: -o-linear-gradient(#444, #111); 
background-image: -ms-linear-gradient(#444, #111); 
background-image: linear-gradient(#444, #111); 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
-moz-box-shadow: 0 1px 1px #777; 
-webkit-box-shadow: 0 1px 1px #777; 
box-shadow: 0 1px 1px #777; 
} 
#hb-menu:before, 
#hb-menu:after { 
content: ""; 
display: table; 
} 
#hb-menu:after { 
clear: both; 
} 
#hb-menu { 
zoom:1; 
} 
#hb-menu li { 
float: left; 
border-right: 1px solid #222; 
-moz-box-shadow: 1px 0 0 #444; 
-webkit-box-shadow: 1px 0 0 #444; 
box-shadow: 1px 0 0 #444; 
position: relative; 
} 
#hb-menu a { 
float: left; 
padding: 12px 15px; 
color: #999; 
text-transform: uppercase; 
font: bold 12px Arial, Helvetica; 
text-decoration: none; 
text-shadow: 0 1px 0 #000; 
} 
#hb-menu li:hover > a { 
color: #fafafa; 
} 
*html #hb-menu li a:hover { /* IE6 only */ 
color: #fafafa; 
} 
#hb-menu ul { 
margin: 15px 0 0 0; 
_margin: 0; /*IE6 only*/ 
opacity: 0; 
visibility: hidden; 
position: absolute; 
top: 38px; 
left: 0; 
z-index: 9999; 
background: #444; 
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
background: -webkit-linear-gradient(#444, #111); 
background: -o-linear-gradient(#444, #111); 
background: -ms-linear-gradient(#444, #111); 
background: linear-gradient(#444, #111); 
-moz-box-shadow: 0 -1px rgba(255,255,255,.3); 
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
border-radius: 3px; 
-webkit-transition: all .2s ease-in-out; 
-moz-transition: all .2s ease-in-out; 
-ms-transition: all .2s ease-in-out; 
-o-transition: all .2s ease-in-out; 
transition: all .2s ease-in-out; 
} 
#hb-menu li:hover > ul { 
opacity: 1; 
visibility: visible; 
margin: 0; 
} 
#hb-menu ul ul { 
top: 0; 
left: 150px; 
margin: 0 0 0 20px; 
_margin: 0; /*IE6 only*/ 
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); 
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); 
box-shadow: -1px 0 0 rgba(255,255,255,.3); 
} 
#hb-menu ul li { 
float: none; 
display: block; 
border: 0; 
_line-height: 0; /*IE6 only*/ 
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
} 
#hb-menu ul li:last-child { 
-moz-box-shadow: none; 
-webkit-box-shadow: none; 
box-shadow: none; 
} 
#hb-menu ul a { 
padding: 10px; 
width: 130px; 
_height: 10px; /*IE6 only*/ 
display: block; 
white-space: nowrap; 
float: none; 
text-transform: none; 
} 
#hb-menu ul a:hover { 
background-color: #0186ba; 
background-image: -moz-linear-gradient(#04acec, #0186ba); 
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
background-image: -webkit-linear-gradient(#04acec, #0186ba); 
background-image: -o-linear-gradient(#04acec, #0186ba); 
background-image: -ms-linear-gradient(#04acec, #0186ba); 
background-image: linear-gradient(#04acec, #0186ba); 
} 
#hb-menu ul li:first-child > a { 
-moz-border-radius: 3px 3px 0 0; 
-webkit-border-radius: 3px 3px 0 0; 
border-radius: 3px 3px 0 0; 
} 
#hb-menu ul li:first-child > a:after { 
content: ''; 
position: absolute; 
left: 40px; 
top: -6px; 
border-left: 6px solid transparent; 
border-right: 6px solid transparent; 
border-bottom: 6px solid #444; 
} 
#hb-menu ul ul li:first-child a:after { 
left: -6px; 
top: 50%; 
margin-top: -6px; 
border-left: 0; 
border-bottom: 6px solid transparent; 
border-top: 6px solid transparent; 
border-right: 6px solid #3b3b3b; 
} 
#hb-menu ul li:first-child a:hover:after { 
border-bottom-color: #04acec; 
} 
#hb-menu ul ul li:first-child a:hover:after { 
border-right-color: #0299d3; 
border-bottom-color: transparent; 
} 
#hb-menu ul li:last-child > a { 
-moz-border-radius: 0 0 3px 3px; 
-webkit-border-radius: 0 0 3px 3px; 
border-radius: 0 0 3px 3px; 
}