עיה בתפריט נפתח בCSS

[stel222]

הי יש לי תפריט נפתח שעובד מצוין.

הבעיה היא שהתפריט נפתח כולו במקום נוסף בצד שמאל של האתר ונגלל הרבה לצד שמאל כל 20 ס"מ מראה המשך לתפריט.

מה שמעניין זה שאם אני מוציא את ה dir="rtl" זה עובד מצוין בלי הבעיה הזו.
זה הקוד של התפריט.:

PHP קוד:

#menuWrap {float:right; height:25px; padding-right:10px; margin-left:20px;}
#menu2 {margin:0; padding:0 0 0 0px; list-style:none; white-space:nowrap; text-align:right; float:left; left top;}
 
 #menu2 a.main {
    background: url(images/menu.png) no-repeat;
    width: 50px;
    height: 20px;
    font-size: 11px;
    color: #f3772f;
}

#menu2 a.main :hover {
    background: url(images/hmenu.png) no-repeat;
    width: 50px;
    height: 20px;
    font-size: 11px;
    color: #ffffff;
}
#menu2 li.li-top:hover > a {background: url(images/hmenu.png) no-repeat; color:#fff;}
#menu2 li.li-top{margin:0; padding:0; list-style:none; background: url(images/menu.png) no-repeat;}
#menu2 li {margin:0; padding:0; list-style:none;}
#menu2 li {display:inline-block; display:inline;}
#menu2 ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px; border:1px solid #000; border-color:#ddd #333 #000 #ddd;}
 
#menu2 ul.ul-one {background:#FC5D09;}
#menu2 ul.ul-two {background:#FC5D09;}
#menu2 ul.ul-three {background:#FC5D09;}
#menu2 ul.ul-four {background:#FC5D09;}
#menu2 ul.ul-five {background:#FC5D09;}
#menu2 ul.ul-six {background:#FC5D09;}
#menu2 ul.ul-seven {background:#FC5D09;}
 
#menu2 li.li-top {float:left; display:block;}
#menu2 li.first {background:none;}
 
#menu2 a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none; padding:0 20px 0 10px;}
 
#menu2 :hover a:hover {background:#fafafa; color:#fafafa;}
 
#menu2 li a.sub {right center;}
 
#menu2 li.li-top a.top {float:left;}


#menu2 li.li-top:hover {position:relative; background: url(images/hmenu.png) no-repeat; color:#fff;}
 
#menu2 li.li-top:hover ul :hover > a {background:#F59258; color:#fff;}
 
#menu2 li.li-top:hover ul {margin-top:25px;}
 
#menu2 :hover ul {left:0;}
#menu2 :hover ul a {white-space:nowrap;}
#menu2 :hover ul b {position:absolute;}
#menu2 :hover ul.right {left:auto; right:-1px;}
 
#menu2 :hover ul :hover ul, 
#menu2 :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul
{left:95%; margin-top:-26px;}
 
#menu2 :hover ul :hover ul.left, 
#menu2 :hover ul :hover ul :hover ul.left,
#menu2 :hover ul :hover ul :hover ul :hover ul.left,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul.left,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul.left,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul.left
{left:auto; right:95%; margin-top:-26px;}
 
#menu2 :hover ul ul, 
#menu2 :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul ul
{left:-9999px;}
 
#menu2 :hover ul ul.left, 
#menu2 :hover ul :hover ul ul.left,
#menu2 :hover ul :hover ul :hover ul ul.left,
#menu2 :hover ul :hover ul :hover ul :hover ul ul.left,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul ul.left,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul ul.left
{left:-9999px; right:auto;}
 
#menu2 table {border-collapse:collapse; margin-top:-1px;}