دوست عزیز سلام
از کد زیر استفاده کن
من در اکثر قالب هام از این استفاده میکنم
خودم نوشتمش
خیلی راحت هم میتونی تغییر بدی
فقط باید یکم به سی اس اس آشنا باشی
@charset "utf-8";
@font-face {
font-family: "homa";
src: url("fonts/BHoma.eot?#") format("eot"), url("fonts/BHoma.woff") format("woff"), url("fonts/BHoma.ttf") format("truetype");
}
@font-face {
font-family: "yekan";
src: url("fonts/BYekan.eot?#") format("eot"), url("fonts/BYekan.woff") format("woff"), url("fonts/BYekan.ttf") format("truetype");
}
div.menu h3 {
display: none;
}
div.menu {
background-color: rgba(0, 0, 0, 0);
display: table;
margin-top: -33px;
width: 100%;
}
div.menu ul.menu {
height: 33px;
padding: 3px 5px;
width: 100%;
}
div.menu ul li {
display: block;
float: right;
margin: 0;
position: relative;
z-index: 100;
}
.menu ul.menu > li {
background: url("../images/litop.png") no-repeat scroll left bottom rgba(0, 0, 0, 0);
height: 25px;
padding: 1px 1px 3px 0;
}
.menu ul.menu > li:hover {
}
.menu a, div.menu span.separator {
color: #FFFFFF;
display: block;
font-family: yekan;
font-size: 15px;
font-weight: normal;
height: 25px;
line-height: 25px;
margin: 0 -3px 0 5px;
padding: 0 8px;
text-decoration: none;
text-shadow: 0 0 1px #999999;
transition: all 0.2s ease 0s;
}
.menu a:hover, div.menu span.separator:hover {
transition: all 0.2s ease 0s;
}
.menu ul li:hover a {
background: none repeat scroll 0 0 #FFFFFF;
}
.menu li:hover li a {
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
}
.menu ul a:hover {
color: #2282A8 !important;
}
.menu li:hover > ul {
display: block;
}
.menu > li.active > a {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 3px;
color: #000000;
}
.menu ul ul {
background: none repeat scroll 0 0 #EEEEEE;
box-shadow: 0 14px 5px -12px #999999;
display: none;
margin: 0;
padding: 0;
position: absolute;
right: 1px;
top: 24px;
width: 195px;
z-index: 999;
}
.menu > ul ul:before {
background: url("../images/menu-top.png") no-repeat scroll right top rgba(0, 0, 0, 0);
content: "";
height: 13px;
margin: -8px 10px 0 0;
position: absolute;
right: 0;
width: 40px;
}
.menu ul a, div.menu span.separator {
font-weight: normal;
}
div.menu ul ul a {
border-bottom: 1px solid #DEDEDE;
border-left: 5px solid #5D6D6D;
color: #666666 !important;
float: none;
font-family: tahoma;
font-size: 12px;
height: auto;
line-height: 30px;
text-align: right;
text-shadow: 0 0 1px #FFFFFF;
width: 182px;
}
div.menu ul ul a:hover {
color: #000000 !important;
padding-right: 15px;
}
.menu ul.menu li:last-child {
}
.menu ul ul li {
background: url("../images/bgsub.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
}
div.menu ul ul li {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0;
padding: 0;
width: 100% !important;
}
.menu ul ul li.parent > a, .menu ul ul li.parent > span.separator {
background: url("../images/urgent1.png") no-repeat scroll left center rgba(0, 0, 0, 0);
transition: all 0.5s ease 0s;
}
.menu ul ul li.parent > a:hover, .menu ul ul li.parent > span.separator:hover {
background: url("../images/urgent2.png") no-repeat scroll left center #6F9118;
transition: all 0.5s ease 0s;
}
.menu ul ul li > ul {
background: none repeat scroll 0 0 #F8F8F8;
box-shadow: 0 14px 5px -12px #999999;
display: none;
margin: 0;
padding: 0;
position: absolute;
right: 202px;
top: 0;
width: 195px;
z-index: 999;
}
.menu > ul ul li > ul:before {
background: url("../images/menu-top-sub.png") no-repeat scroll right top rgba(0, 0, 0, 0);
content: "";
height: 25px;
margin: 5px -8px 0 0;
position: absolute;
right: 0;
width: 40px;
}
div#menubar h3 {
display: none;
}
div#menubar {
background-color: #FFFFFF;
display: table;
float: right;
height: 39px;
padding-right: 17px;
width: 75%;
}
div#menubar ul#menubar {
height: 33px;
padding: 3px 5px;
width: 100%;
}
div#menubar ul li {
display: block;
float: right;
margin: 0;
padding: 5px 3px;
position: relative;
z-index: 99;
}
#menubar ul#menubar > li {
height: 25px;
padding: 1px 1px 3px 0;
}
#menubar ul#menubar > li:hover {
}
#menubar a, div#menubar span.separator {
color: #15527E;
display: block;
font-family: tahoma;
font-size: 10px;
font-weight: normal;
height: 25px;
line-height: 25px;
margin: 0 -3px 0 5px;
padding: 0 8px;
text-decoration: none;
text-shadow: 0 0 1px #999999;
transition: all 0.2s ease 0s;
}
#menubar a:hover, div#menubar span.separator:hover {
transition: all 0.2s ease 0s;
}
#menubar ul li:hover a {
background: none repeat scroll 0 0 #FFFFFF;
}
#menubar li:hover li a {
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
}
#menubar ul a:hover {
color: #2282A8 !important;
}
#menubar li:hover > ul {
display: block;
}
#menubar > li.active > a {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 3px;
color: #000000;
}
#menubar ul ul {
background: none repeat scroll 0 0 #EEEEEE;
box-shadow: 0 14px 5px -12px #999999;
display: none;
margin: 0;
padding: 0;
position: absolute;
right: 1px;
top: 24px;
width: 195px;
z-index: 999;
}
#menubar > ul ul:before {
content: "";
height: 13px;
margin: -8px 10px 0 0;
position: absolute;
right: 0;
width: 40px;
}
#menubar ul a, div#menubar span.separator {
font-weight: normal;
}
div#menubar ul ul a {
border-bottom: 1px solid #DEDEDE;
border-right: 5px solid #5D6D6D;
color: #666666 !important;
float: none;
font-family: tahoma;
font-size: 12px;
height: auto;
line-height: 30px;
text-align: right;
text-shadow: 0 0 1px #FFFFFF;
width: 182px;
}
div#menubar ul ul a:hover {
border-right: 8px solid #5D6D6D;
color: #000000 !important;
padding-right: 17px;
}
#menubar ul#menubar li:last-child {
}
div#menubar ul ul li {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0;
padding: 0;
width: 100% !important;
}
#menubar ul ul li > ul {
background: none repeat scroll 0 0 #F8F8F8;
box-shadow: 0 14px 5px -12px #999999;
display: none;
margin: 0;
padding: 0;
position: absolute;
right: 202px;
top: 0;
width: 195px;
z-index: 999;
}
درضمن کلا بخش منو رو از همین کد استایل دهی کن
نمونه اش رو هم میتونی تو دوتا لینک زیر ببینی
http://news.basesms.ir/ (منوی دنبال کردن ما - زیر منوی اصلی)
http://basesms.ir/ (منوی اصلی)
برقرار باشید :sarma: