<style> 

#hb-menu, #hb-menu ul { 

margin: 0; 

padding: 0; 

list-style: none; 

} 

#hb-menu { 

width: 960px; 

margin: 60px 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 30px; 

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: 20px 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; 

} 

</style> 

<ul id="hb-menu">  

<li><a href="ლინკი">კატეგორია</a></li>  

<li>  

<a href="ლინკი">კატეგორია</a>  

<ul>  

<li><a href="ლინკი">კატეგორია</a></li>  

<li><a href="ლინკი">კატეგორია</a></li>   

<li><a href="ლინკი">კატეგორია</a></li>  

<li><a href="ლინკი">კატეგორია</a></li>

<li><a href="ლინკი">კატეგორია</a></li> 

<li><a href="ლინკი">კატეგორია</a></li>

<li><a href="ლინკი">კატეგორია</a></li>

</ul>  

</li>  

<li><a href="ლინკი">კატეგორია</a></li>  

<li><a href="ლინკი">კატეგორია</a></li>  

<li><a href="ლინკი">კატეგორია</a></li>  

<li><a href="ლინკი">კატეგორია</a></li>