Question

I dont know why, when I add direction:”rtl” to body tag and float:”right” to my Main Menu Container the submenu items get invisible and on hover event submenu container appeared but whenever mouse moved they become invisible again! I checked if main menu container has float:left, it works ok.

<li class=" menu" id="menu1" style="cursor: pointer;">
    <span class="menuText">Personal</span>
    <script>menuCount++;</script>
    <ul style="left: 762px; top: 165px; display: none;" class="subMenuContainer">
        <li linkurl="/URL?fromMenu=true" class="subMenu" id="submenu" style="cursor: pointer; width: 210px;">
            <span class="subMenuText">Profile</span>
        </li>
    </ul>
</li>

This line style=”left: 762px; top: 165px;” added to page when float:right added to menu container, and this is the css class:

.menuHolder {
   border:      0px;
   padding:     0px;
   vertical-align:  top;
   width:       210px !important;
   float:               right;
   margin-top:      10px;
 } 

Answer 1

I found the problem, there was a javascript function inside my page that check if the menu container has a left float display content correctly otherwise not, I just comment this function and now it works ok.