Question

我有导航菜单，只有在IE中箭头图像加载相反。内部子菜单li由javascript插入，它工作正常。

<HTML>
<ul id="navigation">

       <li id="region" class="mainM"  ><a id="item_1" href="#">Area</a>
        <ul id="regionChildren">

        </ul>
    </li>
    <li id="topic" class="mainM"><a id="item_2" class="mainM" href="#">Topic</a>
        <ul id="topicChildren">

        </ul>
    </li>
    <li id="subTopic" class="mainM"><a  id="item_3" class="mainM" href="#">Sub Topic</a>
        <ul id="subTopicChildren">

         </ul>
            </li>
            <li id="mapList" class="mainM"><a  id="item_4" class="mainM" href="#">Map Name</a>
         <ul id="mapListChildren">

        </ul>
            </li>

        </ul>
</HTML>

<style type="text/css">
ul#navigation{
    margin-top:0.5em;
}

ul#navigation ul {
    padding: 0;
    list-style: none;
    font-family:Arial;      
    list-style: none;
    font-family:Arial;
}
ul#navigation > li { 
    position: relative;
    float: right;
    background-color: #e7e7e7;
    border-radius: 7px;
          box-shadow: 3px 3px 6px 1px #333;
          padding:  0 0.35em 0 0.35em;
          margin-right:1em;
}


ul#navigation > li ul li { 
    position: relative;
    float: right;
    background-color: #e7e7e7;
    border-radius: 7px;
          box-shadow: 3px 3px 6px 1px #333;
          z-index: 9999;
}
#navigation a {
    display: block;
    min-width: 7em;
    height: 1.5em;
    padding: 3px  10px 3px 10px;
    text-decoration:none;
          color:#003366;
    text-align:right;
    direction:rtl;
    /* top right bottom left*/
}


ul#navigation li ul {
    position : absolute;
    right: -999em;
    width: 100%;
}
ul#navigation li ul li
{
          margin:0;
          width:100%;
}
#navigation li:hover
{
          background-color:#dddddd;
}
#navigation li:hover ul {
    right: 0;   
    margin-left: 0;
}
#navigation li > a:after { 
          margin-right: 5px; 
          vertical-align:-30%;  
          content: url(images/hebrew/atlas/arrow10.png); 
}
#navigation li:hover > a:after { 
          margin-right: 5px; 
          vertical-align: text-top; 
          content: url(images/hebrew/atlas/arrow10DWN.png); 
}
#navigation > li > a:after { 
          margin-right: 5px; 
          vertical-align:-30%; 
          content: url(images/hebrew/atlas/arrow10.png);
}
#navigation li > a:only-child:after { margin-left: 0; content: ''; }
</style>

在FF和chrome中，箭头按原样加载到左侧（我的站点处于RTL方向）。并且在悬停时它会向下方向，在悬停之后它会像以前一样返回到左方向。

在IE中，箭头在相反的方向加载并且在悬停中我们可以看到它应该向下但是在IE中的mouseout之后它看起来像这样：我无法添加图片，我会尝试解释。在IE中它加载箭头两次 - 一次向左而不是向右和向右曾经在好的方向。它看起来像boe tie。

感谢您的帮助！塔利

IE9在另一侧加载内容网址

0 个答案: