مشكل در زير منوها

[mortaza_max]

سلام دوستان من در قالبي كه طراحي ميكنم براي منو اين كداستايل رو ميدم ولي چيزي كه در نهايت ميشه اين عكسه


مشكل اينجاست كه زير منوهام هم نمايش داده ميشن. همه چي رو هم درست وارد كردم ولي نميدونم چرا اينشكلي شده. اينم از كدهاي سي اس اس. دوستان لطفا كمكم كنيد.

#menu *
{
margin: 0;
padding: 0;
}


#menu ul.menu
{
float:right;font-family: "Francois One", sans-serif;
font-size: 14px;
text-transform: uppercase;}


#menu ul.menu li
{
position: relative;
float: right;
list-style-type: none;
}

#menu ul.menu li a
{
position: relative;
display: block;
line-height: 18px;
padding: 12px 20px;
text-decoration: none;
z-index: 100;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}


#menu ul.menu > li:first-child > a
{
border-left: 0;-webkit-border-top-right-radius: 6px;-webkit-border-bottom-right-radius: 6px;-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}


#menu ul.menu > li:last-child > a
{
border-right: 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomrleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}

/** Sub Menu - Tier 2 **/

#menu ul.menu li ul.sub-menu
{
position: relative;
display: none;
margin: 0;
padding: 0;
}


#menu ul.menu li:hover ul.sub-menu
{
display: block;float: right;
position: absolute;
z-index: 200;
width: 140px;}


#menu ul.menu li ul.sub-menu > li:first-child
{
margin: 6px 0 0 0;
}


#menu ul.menu li ul.sub-menu li a
{
width: 140px;
display: block;
}


#menu ul.menu li ul.sub-menu li:first-child > a
{
border-top: 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;-moz-border-radius-topleft: 6px;-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;}


#menu ul.menu li ul.sub-menu li:last-child > a
{
border-bottom: 0;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;-moz-border-radius-bottomleft: 6px;-moz-border-radius-bottomright: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}


#menu ul.menu li ul.sub-menu li a:hover
{
width: 140px;
display: block;}

/** Sub Menu - Tier 3 **/

#menu ul.menu li ul.sub-menu li ul
{
position: relative;
display: none;
left: 180px;
}


#menu ul.menu li ul.sub-menu li ul li
{
margin: 0 0 0 6px;
}


#menu ul.menu li ul.sub-menu li:hover ul
{
display: block;
float: right;
position: absolute;
top: 0;
}


#menu ul.menu li ul.sub-menu li ul li a
{
width: 140px;display: block;}







#menu ul.menu li a
{
background: #F03;
color: #FFF;
}


#menu ul.menu > li > a
{
border-left: 1px solid #FF2651;
border-right: 1px solid #D9002B;
}


#menu ul.menu li:hover > a, #menu ul.menu li a:hover
{
color: #F03;
background: #FFF;
}


#menu ul.menu li ul.sub-menu li a
{
border-top: 1px solid #FF2651;
border-bottom: 1px solid #D9002B;
}


/** Arrow Styles **/

#menu ul.menu > li > a.haschild
{
padding-right: 30px;
background: #F03 url("../../images/imgs-pink/down.png") no-repeat right center;
}


#menu ul.menu > li:hover > a.haschild
{
background: #FFF url("../../images/imgs-pink/down-hover.png") no-repeat right center;
}


#menu ul.menu li ul.sub-menu li a.haschild
{
background: #F03 url("../../images/imgs-pink/right.png") no-repeat right center;
}


#menu ul.menu li:hover ul.sub-menu li:hover a.haschild
{
background: #FFF url("../../images/imgs-pink/right-hover.png") no-repeat right center;
}