<style type="text/css">
/* the menu style */
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
}
.menuHolder ul.nav li {display:inline-block; position:relative;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
-webkit-transform-origin: 50% 0%;
-webkit-transform:perspective(1500px) rotateX(-90deg);
-o-transform-origin: 50% 0%;
-o-transform:perspective(1500px) rotateX(-90deg);
transform-origin: 50% 0%;
transform:perspective(1500px) rotateX(-90deg);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; 
text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; 
color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-webkit-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
-webkit-transform:perspective(1500px) rotateX(0deg);
-o-transform:perspective(1500px) rotateX(0deg);
transform:perspective(1500px) rotateX(0deg);
}
</style>
<!-- styles for IE9 and lower to show/hide sub menu -->
<!--[if lt IE 10]>
    <style type="text/css">
	   .menuHolder ul.nav {display:inline;}
	   .menuHolder ul.nav li div {display:none;}
	   .menuHolder ul.nav li:hover {direction:ltr;}
	   .menuHolder ul.nav li:hover div {display:block;}
    </style>
<![endif]-->
<!-- possible hack for Opera to show/hide sub menu -->
<style type="text/css">
noindex:-o-prefocus, .menuHolder ul.nav li div {display:none;}
noindex:-o-prefocus, .menuHolder ul.nav li:hover div {display:block;}
</style>
<div class ="menuHolder">
    <ul class ="nav">
	   <li><a class ="top-a" href="#url"><b>میدوری</b></a>
	   <div class ="col3">
		  <ul class ="colLeft">
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
		  </ul>
		  <ul class ="col">
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
		  </ul>
		  <ul class ="colRight">
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
		  </ul>
	   </div>
	   </li>
	   <li><a class ="top-a" href="#url"><b>تالار</b></a>
	   <div class ="col2">
		  <ul class ="colLeft">
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
		  </ul>
		  <ul class ="colRight">
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
		  </ul>
	   </div>
	   </li>
	   <li><a class ="top-a" href="#url"><b> در </b></a>
	   <div class ="col1">
		  <ul class ="colSingle">
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
		  </ul>
	   </div>
	   </li>
	   <li><a class ="top-a" href="#url"><b>شده</b></a></li>
	   <li><a class ="top-a" href="#url"><b>منتشر</b></a>
	   <div class ="col2 left">
		  <ul class ="colLeft">
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
		  </ul>
		  <ul class ="colRight">
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
			 <li><a href="#url">آزمایشی</a></li>
		  </ul>
	   </div>
	   </li>
    </ul>
</div>