Opera rtl direction

[marSoul]

Hi All
I have created a drop down css menu, it is in rtl direction, FF render the sub menus correctly but opera render it as they are ltr direction, anybody know how to fix this ?

html code :

HTML: Select all

<link href="nav.css" rel="stylesheet" type="text/css" media="screen">
<div id="top_border">
  <div id="nav">
    <ul id="top_menu">
      <li id="about_dampezeshki"><a href="#">درباره دامپزشکی</a></li>
      <li id="shop"><a href="#">فروشگاه</a>
        <ul id="shop_sections">
          <li id="ketab"><a href="#">کتاب و سی دی</a></li>
          <li id="sag"><a href="#">سگ</a></li>
          <li id="gorbe"><a href="#">گربه</a></li>
          <li id="mahi"><a href="#">ماهی و آبزیان آکواریومی</a></li>
          <li id="asb"><a href="#">اسب</a></li>
          <li id="parande"><a href="#">پرندگان زینتی</a></li>
          <li id="shotormorgh"><a href="#">شترمرغ</a></li>
          <li id="goosfand"><a href="#">گوسفند و بز</a></li>
          <li id="gav"><a href="#">گاو و گوساله</a></li>
          <li id="morgh"><a href="#">مرغ و جوجه</a></li>
        </ul>
      </li>
      <li id="khadamat"><a href="#">خدمات</a>
        <ul id="khadamat_sections">
          <li id="kariabi"><a href="#">کاریابی</a></li>
          <li id="moshavere"><a href="#">مشاوره</a></li>
          <li id="rahandazi"><a href="#">راه اندازی واحدهای صنعتی</a></li>
        </ul>
      </li>
      <li id="heivanat"><a href="#">حیوانات</a>
        <ul id="heivanat_section">
          <li id="h_sag"><a href="#">سگ</a></li>
          <li id="h_gorbe"><a href="#">گربه</a></li>
          <li id="h_mahi"><a href="#">ماهی و آبزیان آکواریومی</a></li>
          <li id="h_asb"><a href="#">اسب</a></li>
          <li id="h_parande"><a href="#">پرندگان زینتی</a></li>
          <li id="h_shotormorgh"><a href="#">شترمرغ</a></li>
          <li id="h_goosfand"><a href="#">گوسفند و بز</a></li>
          <li id="h_gav"><a href="#">گاو و گوساله</a></li>
          <li id="h_morgh"><a href="#">مرغ و جوجه</a></li>
        </ul>
      </li>
      <li id="marakez"><a href="#">مراکز دامپزشکی</a>
        <ul id="marakez_sections">
          <li id="sazmanha"><a href="#">سازمانها</a></li>
          <li id="clinic"><a href="#">کلینیک ها</a></li>
          <li id="darookhane"><a href="#">داروخانه ها</a></li>
          <li id="sherkat_darooei"><a href="#">شرکتهای دارویی</a></li>
          <li id="sherkat_dampezeshki"><a href="#">شرکتهای دامپزشکی</a></li>
        </ul>
      </li>
      <li id="vasael"><a href="#">وسائل درمانگاهی</a></li>
      <li id="ketabkhane"><a href="#">کتابخانه</a>
        <ul id="ketabkhane_section">
          <li id="maghalat"><a href="#">مقالات</a></li>
          <li id="v_ketab"><a href="#">کتاب و سی دی</a></li>
          <li id="nashriat"><a href="#">نشریات</a></li>
        </ul>
      </li>
      <li id="namaieshgah"><a href="#">نمایشگاهها</a></li>
      <li id="akhbar"><a href="#">اخبار</a></li>
    </ul>
  </div>
</div>

css code :

Code: Select all

@charset "utf-8";
/* CSS Document */

* {
    margin: 0 auto;
    padding: 0;
    text-align:center;
    direction:rtl;
}
div#top_border {
    background-color:#0066CC;
    height:115px;
    background:url(img/bg.jpg);
    background-repeat:repeat-x;
}
ul#top_menu {
    position:relative;
    list-style: none;
    width: 950px;
    padding:50px 0 0 0;
}
li {
    padding: 0 5px 0 5px;
    float:right;
    list-style:none;
    direction:rtl;
    text-align:center;
}
li ul {
    display:none;
    position:absolute;
}
ul li a {
    padding:0;
}
li:hover ul {
    display:block;
    direction:rtl;
}
ul li ul li {
    position:relative;
    display:block;
}
ul li ul li a {
    padding:5px;
    display:block;
}
li#about_dampezeshki {
    background:url(img/about_dampezeshki.jpg);
    width:130px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#about_dampezeshki a:hover {
    background:url(img/about_dampezeshki_over.jpg);
    width:130px;
    height:27px;
    background-repeat:no-repeat;
}
li#shop {
    background:url(img/shop.jpg);
    width:95px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#shop a, li#khadamat a, li#heivanat a, li#marakez a, li#about_dampezeshki a, li#vasael a, li#ketabkhane a, li#namaieshgah a, li#akhbar a {
    display:block;
    text-indent:-10000px;
    text-align:center;
    height:27px;
}
li#shop a:hover {
    background:url(img/shop_over.jpg);
    width:95px;
    height:27px;
    background-repeat:no-repeat;
}
li#shop ul li, li#khadamat ul li, li#heivanat ul li, li#marakez ul li, li#vasael ul li, li#ketabkhane ul li {
    float:right;
    padding:7px;
    text-align:right;
    margin:0 auto;
}
li#shop ul li a, li#khadamat ul li a, li#heivanat ul li a, li#marakez ul li a, li#vasael ul li a, li#ketabkhane ul li a {
    display:inline;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    color: white;
    text-decoration:none;
}
li#shop ul li a:hover, li#khadamat ul li a:hover, li#heivanat ul li a:hover, li#marakez ul li a:hover, li#vasael ul li a:hover, li#ketabkhane ul li a:hover {
    background:none;
    width:auto;
}
li#khadamat {
    background:url(img/khadamat.jpg);
    width:95px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#khadamat a:hover {
    background:url(img/khadamat_over.jpg);
    width:95px;
    height:27px;
    background-repeat:no-repeat;
}
li#heivanat {
    background:url(img/heivanat.jpg);
    width:95px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#heivanat a:hover {
    background:url(img/heivanat_over.jpg);
    width:95px;
    height:27px;
    background-repeat:no-repeat;
}
li#marakez {
    background:url(img/marakez.jpg);
    width:95px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#marakez a:hover {
    background:url(img/marakez_over.jpg);
    width:95px;
    height:27px;
    background-repeat:no-repeat;
}
li#vasael {
    background:url(img/vasael.jpg);
    width:108px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#vasael a:hover {
    background:url(img/vasael_over.jpg);
    width:108px;
    height:27px;
    background-repeat:no-repeat;
}
li#ketabkhane {
    background:url(img/ketabkhane.jpg);
    width:95px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#ketabkhane a:hover {
    background:url(img/ketabkhane_over.jpg);
    width:95px;
    height:27px;
    background-repeat:no-repeat;
}
li#namaieshgah {
    background:url(img/namaieshgah.jpg);
    width:95px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#namaieshgah a:hover {
    background:url(img/namaieshgah_over.jpg);
    width:95px;
    height:27px;
    background-repeat:no-repeat;
}
li#akhbar {
    background:url(img/akhbar.jpg);
    width:95px;
    height:27px;
    padding:0;
    background-repeat:no-repeat;
}
li#akhbar a:hover {
    background:url(img/akhbar_over.jpg);
    width:95px;
    height:27px;
    background-repeat:no-repeat;
}