سلام
ببخشید این قالب وب من هست (index.php) که با wrapper نوشتم:
<?php
ob_start();
require_once 'config.php';
?>
<!doctype html>
<html dir="rtl" leng="persian">
<meta charset="utf-8"/>
<title><?php echo TITR;?></title>
<link href="BigMenu.css" rel="stylesheet" type="text/css" />
<link href="topMenu.css" rel="stylesheet" type="text/css" />
<link type="text/css"/>
<style>
#footer_container{
background:#fff;
width:100%;
bottom:0;
background-position:bottom;
position:absolute;
z-index:1;
}
#footer {
width:100%;
text-align:center;
bottom:0;
background-position:bottom;
position:absolute;
z-index:2;
}
.textt{
position:absolute;
text-align:center;
direction:rtl;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#fff;
z-index:3;
text-decoration:none;
text-shadow:3px 4px 5px#fff;
transition:all 543ms ease-in-out;
-webkit- transition:all 543ms ease-in-out;
-moz- transition:all 543ms ease-in-out;
-ms- transition:all 543ms ease-in-out;
-o- transition:all 543ms ease-in-out;
}
.textt:hover{
color:#C33;
text-shadow:1px 2px 3px#fff;
transition:all 543ms ease-in-out;
-webkit- transition:all 543ms ease-in-out;
-moz- transition:all 543ms ease-in-out;
-ms- transition:all 543ms ease-in-out;
-o- transition:all 543ms ease-in-out;
}
</style>
</head>
<body >
<!----begin wrapper---->
<div id="wrapper">
<!----begin mainheader---->
<div id="main_header">
<div id="logo">
<a href="#">
<img src="keyvan logo.png" style="height:90px;width:100%"/>
</a>
</div>
</div>
<!---- begin navigation---->
<div id="nav">
<form id="form1" >
<div>
<div id="top-tabbed-content" class="top-menu-div rounded-10 box-shadow"><div><span class="row-border-title">
<table class="GENERALTEXT dg" cellspacing="0" border="0" direction="rtl">
<tbody><tr style="color:;background-color:;">
<td>
<div border="0" width="100%" cellpadding="0" cellspacing="0" class="List">
<div class="ListPicture">
</div>
<div class="ListContent">
<span class="Title"></span>
<div class="Summary"><ul class="mega-1st">
<li class="mega-1st home"><a href="../Home/Default.aspx?CategoryID=c78bd118-a241-4295-a8f2-91b6c42beaa4"><!--<img alt="" src="../theme/irancell-theme/images/home.png" />--></a> </li>
<li class="seperator"></li>
<li class="seperator"></li>
<li class="mega-1st"><a href="<?php echo ADDR;?>/main.php">صفحه اصلی</a></li>
<div class="mega-submenu">
<div style="width: 460px; opacity: 80" class="mega-3rd"></div>
<li class="seperator"></li>
<li class="mega-1st"><a href="#">محصولات </a>
<div class="mega-submenu">
<ul style="opacity: 70" class="mega-2nd">
<li class="mega-2nd"><a href="<?php echo ADDR;?>/ajor.php"> طرح آجری</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/pazel.php"> طرح پازل</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/hasir.php">طرح حصیری</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/gheychi.php">طرح قیچی</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/antik.php">طرح آنتیک</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/namonazam.php">طرح نامنظم</a></li>
</ul>
</div>
</li>
<li class="seperator"></li>
<li class="mega-1st"><a href="#">نمونه کارها </a>
<div class="mega-submenu">
<ul style="opacity: 70" class="mega-2nd">
<li class="mega-2nd"><a href="<?php echo ADDR;?>/kharej.php">نمای خارجی</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/dakhel.php">نمای داخلی</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/kaf.php">نمای کف</a></li>
</ul>
</div>
</li>
<li class="seperator"></li>
<li class="mega-1st"><a href="#">درباره ما </a>
<div class="mega-submenu">
<ul style="opacity: 70" class="mega-2nd">
<li class="mega-2nd"><a href="<?php echo ADDR;?>/factory.php">کارخانه</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/manager.php">مسولان</a></li>
</ul>
</div>
<li class="seperator"></li>
<li class="mega-1st"><a href="#">راهنما </a>
<div class="mega-submenu">
<ul style="opacity: 70" class="mega-2nd">
<li class="mega-2nd"><a href="<?php echo ADDR;?>/kharid.php">راهنمای خرید</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/pardakht.php">راهنمای پرداخت</a></li>
</ul>
</div>
<li class="seperator"></li>
<li class="mega-1st"><a href="#">واحد فروش </a>
<div class="mega-submenu">
<ul style="opacity: 70" class="mega-2nd">
<li class="mega-2nd"><a href="<?php echo ADDR;?>/form.php">فرم سفارش</a></li>
<li class="mega-2nd"><a href="<?php echo ADDR;?>/peygiri.php">پیگیری سفارش</a></li>
</ul>
</div>
<li class="seperator"></li>
<li class="mega-1st"><a href="<?php echo ADDR;?>/contact.php">ارتباط باما</a></li>
<li class="seperator"></li>
<li class="mega-1st"><a href="<?php echo ADDR;?>/support.php">پشتیبانی</a></li>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<!---- end navigation ---->
</div>
<!---- begin container---->
<div id="container">
<div class="content" align="center" dir="rtl">
</div>
</div>
<!---- end container---->
<!----begin footer---->
<div id="footer_container">
<div id="footer">
<a href="index.php"><img src="copyright.png" style="height:50px;width:100%"/></a>
</div>
</div>
<!----end footer---->
</div>
<!----end wrapper----->
</body>
</html>
<?php
ob_end_flush();
?>
واین هم کد سی اس اس منوی افقی با زیر منوی افقی
body {
}
/*################################################# ###########################
6. MAIN MENU (MEGA MENU)
################################################## ########################## */
a
{
text-decoration:none;
}
.top-menu-div .ListPicture{
height: 0;
width: 0;
}
.top-menu-div ul.mega-1st {
height:22px;
padding-top:3px;
*padding-top: 1px;
display:block;
width:960px;
position:relative;
}
.top-menu-div ul.mega-1st li.mega-1st {
/*Commented By Hadidi 910906 */
/*height:22px; */
float:right;
display:inline-block;
/*border-right:1px #e6e6e6 solid;*/
position:static!important;
height: 26px;
/* Added By Hadidi 910909 */
*height: 27px;
}
.top-menu-div ul.mega-1st li.mega-1st:first-child {
border:0;
}
.top-menu-div ul.mega-1st li.mega-1st a {
display:block;
font-family:Tahoma;
font-size:12px;
font-weight:normal;
line-height:14px;
color:#e6e6e6;
padding:0 7px;
margin:0 5px 0 0;
height: 26px;
/* Added By Hadidi 910909 */
*height: 27px;
*line-height:17px;
}
.top-menu-div ul.mega-1st li.mega-1st:hover{
background: url('images/mega-1st-item-li-right.png') no-repeat bottom right;
}
.top-menu-div ul.mega-1st li.mega-1st > a:hover, .top-menu-div ul.mega-1st li.mega-1st:hover > a {
color:#313131;
/*background:transparent url('images/main-menu-item-hover-bg.png') repeat-x scroll left top;
height:18px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;*/
background: url('images/mega-1st-item-li-left.png') no-repeat bottom left;
line-height: 20px;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd {
display:none;
position:absolute;
padding-top:2px;
width:960px;
right:-5px;
top:25px;
height: 26px;
}
.mega-submenu ul.mega-2nd{
background: url('images/mega-2nd-bg-grdnt.png') repeat !important;
}
.top-menu-div ul.mega-1st li.mega-1st:hover ul.mega-2nd {
display:inline-block;
margin-left:5px;
margin-right:3px;
border-top: 3px solid #fbc21b;
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
}
@media \0screen {
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd{
background:transparent url(images/mega-2nd-bg-grdnt.png) scroll repeat 0% 0% !important;
}
.top-menu-div ul.mega-1st li.mega-1st:hover ul.mega-2nd {display:inline-block;}
}
*+html .top-menu-div ul.mega-1st li.mega-1st:hover ul.mega-2nd {display:inline-block;background:transparent url('images/ie78-megamenu-sub.png') no-
repeat scroll left top;height:26px;right:0;}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd {
display:inline-block;
float:right;
height:26px;
position:relative;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd:hover {
/*background:transparent url('images/sub-menu-bg.png') repeat scroll left top;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;*/
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd > a {
height:14px;
display:block;
font-family:Tahoma;
font-size:12px;
font-weight:normal;
line-height:14px;
color:#e6e6e6;
padding:0 7px;
margin:0 5px 0 0;
height: 26px;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd:hover{
background: url('images/mega-1st-item-li-right.png') no-repeat bottom right;
color: #313131;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd:hover > a{
background: url('images/mega-1st-item-li-left.png') no-repeat bottom left;
color: #313131;
line-height: 20px;
height:26px;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd > a:hover, .top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-
2nd:hover > a {
color:#313131;
background: url('images/mega-1st-item-li-left.png') no-repeat bottom left;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd div.mega-3rd {
display:none;
position:absolute;
top:26px;
right:0;
background:transparent url('images/mega-3nd-bg-grdnt.png') repeat;
border: none;
border-top:3px #FBC21B solid;
-webkit-border-radius: 0;
border-radius: 0;
-moz-border-radius: 0;
-khtml-border-radius: 0;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd:hover div.mega-3rd {
display:inline-block;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd:hover ul.mega-3rd {
display:inline-block;
float:right;
width:210px;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd:hover ul.mega-3rd li.mega-3rd {
display:block;
width:210px;
padding:3px 0;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd:hover ul.mega-3rd li.mega-3rd a {
display:block;
padding:0 7px;
/*height:14px;*/
line-height:14px;
height: 20px;
border-bottom: 1px solid #666;
margin-left: 5px;
font-size: 11px;
}
.top-menu-div ul.mega-1st li.mega-1st ul.mega-2nd li.mega-2nd:hover ul.mega-3rd li.mega-3rd a:hover {
color:#FFBD00;
}
/*################################################# ###########################
7. SEPERATOR
################################################## ########################## */
.top-menu-div li.seperator{
display: block;
width: 3px;
float: right;
height: 100%;
background: url('images/bottom-tabs-seperator-top.png') no-repeat center center;
}
/*javadi added*/
.top-menu-div ul.mega-1st li.mega-1st.home
{
display:block;
width:18px;
height:22px;
margin-left:5px;
margin-right:10px;
}
.top-menu-div ul.mega-1st li.mega-1st.home a
{
display:block;
width:18px;
height:22px;
margin:0px;
padding:0px;
}
.top-menu-div ul.mega-1st li.mega-1st.home
{
background-image:url('images/home.png') !important;
background-position:0px 0px;
background-repeat:no-repeat;
}
.top-menu-div ul.mega-1st li.mega-1st.home:hover{
background-image:url('images/home.png') !important;
background-position:0px -23px;
background-repeat:no-repeat;
}
.top-menu-div ul.mega-1st li.mega-1st.home > a:hover, .top-menu-div ul.mega-1st li.mega-1st.home:hover > a {
color:#313131;
background: none !important;
line-height: 20px;
}
من توی این کدcss کداو گزینه را تغییر بدهم که فاصله بین منواصلی و زیر منو افقی بیشتر بشود.