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では、矢印を2回ロードします.1回は右ではなく左に、もう1回は良い方向にロードします。ボーイタイみたいです。

手伝ってくれてありがとう！タリ

4

0 に答える 0