1

我有导航菜单，只有在 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 中鼠标移出后，它看起来像这样：我无法添加图片，我将尝试解释。在 IE 中，它加载箭头两次 - 一次向左而不是向右，一次向好的方向。它看起来像 boe tie。

感谢帮助！大理

4

0 回答 0