<style>@font-face {
font-family: 'web yekan';
src: url('http://up.monister.ir/up/sajaddesign/sajaddesign-temp/fonts/webyekan.eot');
src: url('http://up.monister.ir/up/sajaddesign/sajaddesign-temp/fonts/webyekan.eot#iefix') format('embedded-opentype'),
url('http://up.monister.ir/up/sajaddesign/sajaddesign-temp/fonts/webyekan.woff') format('woff'),
url('http://up.monister.ir/up/sajaddesign/sajaddesign-tempfonts/webyekan.ttf') format('truetype'),
url('http://up.monister.ir/up/sajaddesign/sajaddesign-temp/fonts/webyekan.svg#CartoGothicStdBook') format('svg');
font-weight: normal;
font-style: normal;
}
nav{
background:#354b60;
padding:10px;
width:500px;
direction:rtl;
position:fixed;
top:0;
right:0;
width:100%;
}
nav ul{
padding:0;
margin:0;
list-style:none;
}
nav ul li{
float:right;
}
nav a{
text-decoration:none;
color:#fff;
font:16px web yekan;
padding:10px;
direction:rtl;
transition:all .8s ease;
-moz-transition:all .8s ease;
-webkit-transition:all .8s ease;
-ms-transition:all .8s ease;
-o-transition:all .8s ease;
margin-left:10px;
}
nav a:hover{
box-shadow: 0 -80px 0px #537799 inset;
text-shadow:0 0 3px #111;
}
.sub{
position:absolute;
top:40px;
background:#354b60;
direction:rtl;
padding:0px;
margin:0;
opacity:0;
margin-top:40px;
margin:0 auto;
}
.sub li{
float:none;
text-align:center;
margin:0;
padding:5px;
}
.sub li:first-child:before{
content:"";
background:#354b60;
position:absolute;
top:-5px;
z-index:1111;
height:10px;
width:10px;
margin:0 auto;
right:2px;
left:2px;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
.sub li a{
padding:2px;}
.sub li a:hover{
box-shadow:none;
text-shadow:0 0 3px #fff;;
}
nav ul li:hover > ul {
opacity:1;
margin-top:15px;
}
nav ul li > ul li{
border-bottom:1px solid #999;
}
nav ul li> ul ,.sub li {
transition:all .8s ease;
-moz-transition:all .8s ease;
-webkit-transition:all .8s ease;
-ms-transition:all .8s ease;
-o-transition:all .8s ease;
}
</style>
<nav>
<ul>
<li><a href="http://monister.ir">صفحه نخست </a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#/">دارای زیر منو</a>
<ul class="sub">
<li><a href="#">زیر منو</a></li>
<li><a href="#">زیر منو</a></li>
<li><a href="#">زیر منو</a></li>
</ul>
</li>
<li><a href="#/">دانلود بازی </a>
<ul class="sub">
<li><a href="#">زیر منو</a></li>
<li><a href="#">زیر منو</a></li>
<li><a href="#">زیر منو</a></li>
</ul>
</li>
<li><a href="#/">آپلود سنتر وبسایت</a></li>
</ul>
<div style="clear:both"></div>
</nav>
حمایت شده:
