<style>
#dsvmenu,#dsvmenu ul {
background-color: #8899AA;
list-style: none outside none;
margin: 0;
padding: 0;
}
#dsvmenu {
display: block;
padding: 5px;
position: relative;
width: 112px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#dsvmenu ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#dsvmenu li {
background-color: #FFFFFF;
position: relative;
}
#dsvmenu > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dsvmenu li a {
background-color: #AABBCC;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 15px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:95px;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;}
#dsvmenu li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
color: #FFFFFF;}
#dsvmenu li:hover ul.subdsvmenu {
left: 114px;
opacity:1;
top: 0;
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#dsvmenu ul li {
width: 100%;
}
</style>
<ul id="dsvmenu">
<li><a href="#">მთავარი</a></li>
<li><a href="#">მენიუ 1</a>
<ul class="subdsvmenu">
<li><a href="#">კატეგორია 1</a></li>
<li><a href="#">კატეგორია 2</a></li>
<li><a href="#">კატეგორია 3</a></li>
<li><a href="#">კატეგორია 4</a></li>
<li><a href="#">კატეგორია 5</a></li>
</ul>
</li>
<li><a href="#">მენიუ 2</a>
<ul class="subdsvmenu">
<li><a href="#">კატეგორია 1</a></li>
<li><a href="#">კატეგორია2</a></li>
<li><a href="#">კატეგორია 3</a></li>
<li><a href="#">კატეგორია 4</a></li>
<li><a href="#">კატეგორია 5</a></li>
<li><a href="#">კატეგორია 6</a></li>
<li><a href="#">კატეგორია 7</a></li>
<li><a href="#">კატეგორია 8</a></li>
</ul>
</li>
<li><a href="#">მენიუ 3</a>
<ul class="subdsvmenu">
<li><a href="#">კატეგორია1</a></li>
<li><a href="#">კატეგორია2</a></li>
<li><a href="#">კატეგორია3</a></li>
<li><a href="#">კატეგორია4</a></li>
<li><a href="#">კატეგორია5</a></li>
</ul>
</li>
<li><a href="#">მენიუ 4</a>
<ul class="subdsvmenu">
<li><a href="#">კატეგორია1</a></li>
<li><a href="#">კატეგორია2</a></li>
<li><a href="#">კატეგორია3</a></li>
<li><a href="#">კატეგორია4</a></li>
<li><a href="#">კატეგორია5</a></li>
</ul>
</li>
<li><a href="#">მენიუ 5</a>
<ul class="subdsvmenu">
<li><a href="#">კატეგორია1</a></li>
<li><a href="#">კატეგორია2</a></li>
<li><a href="#">კატეგორია3</a></li>
<li><a href="#">კატეგორია4</a></li>
<li><a href="#">კატეგორია5</a></li>
</ul>
</li>
<li><a href="#">კონტაქტი</a></li>
</ul>