1 reply [Last post]
royshoa
Offline
newbie
israel
Last seen: 9 years 34 weeks ago
israel
Timezone: GMT+2
Joined: 2009-09-29
Posts: 2
Points: 2

Hello,
I am using the dreamweaver menu for my top menu.
In my site, i need the menu to work with RTL and LTR.
I success to make it work in RTL in all the browsers except IE6 and IE7.
If you look on the file that i add and open the menu in IE6/7 you can see that
the sub-menu is not coming below the main menu. he come a little left to it.
I need to fix this problem only with CSS (no java-script changes) And i don't like to give width for the main

  • tag's.
    As i understand, the problem is in this line:
  • /* This class is active by java-script, we set left/right to 100% so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
    right: auto;
    display: block;
    }

    In IE6/7 its not take it right as its need to be (i try all the kind, 100%, 0, -100%...).

    If some one can help me i will be gratefully.
    Thanks,
    Roy Shoa.

    royshoa
    Offline
    newbie
    israel
    Last seen: 9 years 34 weeks ago
    israel
    Timezone: GMT+2
    Joined: 2009-09-29
    Posts: 2
    Points: 2

    Here is the code:

    -----------------HTML-----------------------------
     <div class="topMenuContainer">
                    <ul id="MenuBar2" class="MenuBarHorizontal MenuBarActive">
                      <li>
                        <a href="http://127.0.0.1/site/index.asp?depart_id=99202">דף הבית</a>
                      </li>
                      <li>
                        <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D1%2D1%2D1%2D1%2D1%2D1%2D1">עמוד 1</a>
                        <ul class="">
                          <li>
                            <a class="" tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D1%2D2">עמוד 1.2</a>
                          </li>
                          <li>
                            <a class="" tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D1%2D3">עמוד 1.3</a>
                          </li>
                          <li>
                            <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D1%2D4">עמוד 1.4</a>
                          </li>
                          <li>
                            <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D1%2D5">עמוד 1.5</a>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a class="" tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D2%2D1%2D1%2D1%2D1%2D1">עמוד 2</a>
                      </li>
                      <li>
                        <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D1%2D1%2D1%2D1%2D1">עמוד 3</a>
                        <ul class="">
                          <li>
                            <a class="" tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D1%2D1%2D1%2D1%2D1%2D1">עמוד 3.1</a>
                          </li>
                          <li>
                            <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2">עמוד 3.2</a>
                            <ul class="">
                              <li>
                                <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D1">עמוד 3.2.1</a>
                                <ul class="">
                                  <li>
                                    <a class="" tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D1%2D1">עמוד 3.2.1.1</a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D1%2D2">עמוד 3.2.1.2</a>
                                    <ul class="">
                                      <li>
                                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D1%2D2%2D1">עמוד 3.2.1.2.1</a>
                                      </li>
                                      <li>
                                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D1%2D2%2D2">עמוד 3.2.1.2.2</a>
                                      </li>
                                    </ul>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D1%2D3">עמוד 3.2.1.3</a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D1%2D4">עמוד 3.2.1.4</a>
                                  </li>
                                </ul>
                              </li>
                              <li>
                                <a class="" tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D2">עמוד 3.2.2</a>
                              </li>
                              <li>
                                <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D3">עמוד 3.2.3</a>
                              </li>
                              <li>
                                <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D4">עמוד 3.2.4</a>
                              </li>
                              <li>
                                <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D2%2D5">עמוד 3.2.5</a>
                              </li>
                            </ul>
                          </li>
                          <li>
                            <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D3">עמוד 3.3</a>
                          </li>
                          <li>
                            <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D3%2D4">עמוד 3.4</a>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D4%2D1">עמוד 4</a>
                      </li>
                      <li>
                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D5%2D1">עמוד 5</a>
                      </li>
                      <li>
                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D6%2D1">עמוד 6</a>
                      </li>
                      <li>
                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%9E%D7%95%D7%93%2D7%2D1">עמוד 7 עמוד 7 עמוד עמוד 7 עמוד 7 עמוד 77</a>
                      </li>
                    </ul>
                  </div><script type="text/javascript">
    var MenuBar2 = new Spry.Widget.MenuBar('MenuBar2', {imgDown:'/images/icons/bollWhiteHover.gif', imgRight:'/images/icons/bollWhiteHover.gif'});
                  </script><br>
                  <br>
                  <br>
                  <table class="bgcolorTable" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                      <tr>
                        <!-- side menu -->
                        <td id="sideMenu_Right" class="SideMenuSetting_Right" style="direction: rtl;" valign="top">
                          <div width="100%" style="margin: 0px 1px 0px 3px;">
                            <ul id="MenuBar1" class="MenuBarVertical">
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a href="http://127.0.0.1/site/index.asp?depart_id=99202">דף הבית</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%9B%D7%A7%D7%92%2D%D7%A2%D7%93%D7%92%D7%A2">כקג עדגע</a>
                                </div>
                                <ul>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/%D7%9B%D7%A8%D7%A7%2D%D7%A2%D7%93%D7%9B%D7%A2%D7%9B%D7%93%D7%99">כרק עדכעכדי </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/1">1 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/2">2 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/3">3 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/4">4 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/5">5 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/6">6 </a>
                                  </li>
                                </ul>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D1%2D1%2D1">תפריט 1</a>
                                </div>
                                <ul>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D1%2D1%2D1%2D1">תפריט 1 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D2%2D1">תפריט 2 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D3%2D1%2D1">תפריט 3 </a>
                                    <ul>
                                      <li>
                                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D3%2D1%2D1%2D1">תפריט 3.1 </a>
                                      </li>
                                      <li>
                                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D3%2D2">תפריט 3.2 </a>
                                      </li>
                                      <li>
                                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D3%2D3">תפריט 3.3 </a>
                                      </li>
                                      <li>
                                        <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D3%2D4">תפריט 3.4 </a>
                                      </li>
                                      <li>
                                        <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/352546">352546 </a>
                                        <ul>
                                          <li>
                                            <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/23523532">23523532 </a>
                                            <ul>
                                              <li>
                                                <a tabindex="-1" href="http://127.0.0.1/99202/35235325">35235325 </a>
                                              </li>
                                              <li>
                                                <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/43643643">43643643 </a>
                                                <ul>
                                                  <li>
                                                    <a tabindex="-1" href="http://127.0.0.1/99202/346346">346346 </a>
                                                  </li>
                                                </ul>
                                              </li>
                                            </ul>
                                          </li>
                                        </ul>
                                      </li>
                                    </ul>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D4%2D1%2D1">תפריט 4 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D5%2D1%2D1%2D1">תפריט 5 </a>
                                  </li>
                                  <li>
                                    <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D6%2D1">תפריט 6 </a>
                                  </li>
                                </ul>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D2">תפריט 2</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D3%2D1">תפריט 3</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D4">תפריט תפריט 4תפריט 4תפריט 4תפריט 44</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D5%2D1%2D1">תפריט 5</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%AA%D7%A4%D7%A8%D7%99%D7%98%2D6">תפריט 6</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/site/form/showForm.asp?form_id=106223">טופס חדש</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/site/detail/guestbook/guestbook.asp?depart_id=99202">ספר אורחים</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%A7%D7%98%D7%92%D7%95%D7%A8%D7%99%D7%94%2D%D7%A8%D7%99%D7%A7%D7%94">קטגוריה ריקה</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%9B%D7%92%D7%99%D7%92%D7%A2%D7%9B%D7%98%D7%90">כגיגעכטא</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%99%D7%97">יח</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%92%D7%93%D7%A2%D7%9B%D7%99%D7%A2">גדעכיע</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%A2%D7%92%D7%9B%D7%97%D7%9B%D7%99%D7%A2%D7%9B">עגכחכיעכ</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%93%D7%9B%D7%99%D7%92%D7%A2%D7%90">דכיגעא</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/%D7%92%D7%93%D7%A2%D7%93%D7%A9%D7%90%D7%A8">גדעדשאר</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/65743">65743</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/99202/dgsdfghdy">dgsdfghdy</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" class="MenuBarItemSubmenu" href="http://127.0.0.1/99202/%D7%A7%D7%98%D7%92%D7%95%D7%A8%D7%99%D7%94%2D%D7%A8%D7%99%D7%A7%D7%94%2D2">קטגוריה ריקה 2</a>
                                </div>
                              </li>
                              <li>
                                <div class="MainMenuBarBackgrounImage">
                                  <a tabindex="-1" href="http://127.0.0.1/site/detail/poll/poll.asp?QuestionID=12464&amp;depart_id=99202">סקר חדש</a>
                                </div>
                              </li>
                            </ul><br>
                          </div>
     
    -----------------CSS-----------------------------
    /* The main container of the top menu */
    div.topMenuContainer{
    	width: 100%;
    	height: 30px;
    	border: 2px solid black;
    	direction: rtl;
    	background-color: #40ff00;
    }
    /* This class is for main container of the top menu bar */
    ul.MenuBarHorizontal{
    	height: 30px;
    	border: 2px solid black;
    	padding: 0;
    	list-style-type: none;
    	cursor: default;
    	margin: 0 auto;
    	direction: rtl;
    	text-align: right;;
    }
    /* this class is active my the java-script code so dont delete this!!, currently setting z-index to accomodate IE rendering bug: <a href="http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html" rel="nofollow">http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html</a> */
    ul.MenuBarActive{
    	z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li{
    	height: 30px;
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	position: relative;
    	cursor: pointer;
    	line-height: 30px;
    	direction:rtl;
    	text-align: right;
    	float: right;
    }
    ul.MenuBarHorizontal li:hover, ul.MenuBarHorizontal li:focus{
    	background-color: #ffea00;
    }
    /* This is the sub-container properties */
    /* Submenus should appear slightly overlapping to the right (X%) and up (-Y%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul{
    	width: 100px;
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	z-index: 1020;
    	cursor: default;
    	position: absolute;
    	border: 1px solid #FFFFFF;
    	border-bottom: 0;
    	display: none;
    	right: -1000em;
    	background-color: #0900ff;
    }
    /* This class is active by java-script, we set left/right to 100% so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
    	right: auto;
    	display: block;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li{
    	width: 100px;
    	height: 30px;
    	padding: 0;
    	border-bottom: 1px solid #FFFFFF;
    }
    ul.MenuBarHorizontal ul li:hover, ul.MenuBarHorizontal ul li:focus{
    	background-color: #ffea00;
    }
    /* Submenus should appear slightly overlapping to the right/left (x%) and up (y%) */
    ul.MenuBarHorizontal ul ul{
    	position: absolute;
    	margin: 0 100% 0 0 !important;;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
    	top: 0;
    	right: auto;
    }
    /* Menu items are a light gray block without padding and text decoration */
    ul.MenuBarHorizontal a{
    	width: 100%;
    	height: 30px;
    	padding: 0 10px 0;
    margin: 0;
    color: #d90000;
    display: block;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    text-align: right;
    }
    /* Define setting for all the a tag: hover in the main-container */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    color: #0051ff;
    text-decoration: none;
    }
    /* Define setting for all the a tag in the sub-container's */
    ul.MenuBarHorizontal ul li a {
    color: #a33434;
    font-size: 16px;
    }
    /* Define setting for all the a tag: hover in the sub-container's */
    ul.MenuBarHorizontal ul li a:hover, ul.MenuBarHorizontal ul li a:focus {
    color: #606b96;
    }
    /* Define setting for menu item that are open (when you select a menu and go in to his sub-menu there is a line mark ) */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    color: #0051ff;
    }
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe{
    	position: absolute;
    	z-index: 1010;
    	filter:alpha(opacity:0.1);
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection{
    	ul.MenuBarHorizontal li.MenuBarItemIE{
    		display: inline;
    	f\loat: right;
    	}
    }