0

これは、ドロップダウン メニューのコードです。ie8 以外のすべてのブラウザで問題ありません。問題がわかりません。ご意見をお聞かせいただければ幸いです。

<ul id="nav" class="nav_wrapper">
  <li id="menu_3">
    <a href="#"> A </a>
    <ul class="sub_menu" id="sub_3" style="display: none">
      <li id="menu_5"><a href="main.php?pages=5"> 1 </a></li>
      <li id="menu_6"><a href="main.php?pages=6"> 2 </a></li>
      <li id="menu_7"><a href="main.php?pages=7"> 3 </a></li>
    </ul>
  </li>

  <li id="menu_18"><a href="main.php?pages=18"> B </a></li>

  <li id="menu_19">
    <a href="#"> C </a>
    <ul class="sub_menu" id="sub_19" style="display: none">
      <li id="menu_20"><a href="main.php?pages=20"> 1 </a></li>
      <li id="menu_21"><a href="main.php?pages=21"> 2 </a></li>
    </ul>
  </li>
</ul>

これがスタイルシートです。背景や境界線などの不要なスタイルをいくつか削除しました...

.nav_wrapper {
left: 0px;
margin-top: 7px;
padding: 0px;
position: fixed;
right: 0px;
Z-index:10;}

#nav > li { 
display: inline;
float: right;
position: relative;}

li { 
font-family: "tahoma";
font-size: 10pt;
list-style: none outside none;
}

li a {
float: right;
padding: 18px 15px 20px;
text-decoration: none;
}

.sub_menu {
float: right;
line-height: normal;
margin-left: -60px;
margin-top: 55px;
padding: 0px;
position: fixed;
width: 202px;
}

.sub_menu li {
display: inline-block;
text-align: right;
 }

.sub_menu li a {
direction: rtl;
display: inline-block;
line-height: 1;
padding: 10px 10px 10px 0px;
width: 192px;
 }

問題は、ie8 ではメイン メニューが右から左にカスケード表示されることです。また、サブメニューがメインメニュー項目の下に正しく配置されていません。

4

1 に答える 1

0

http://jsfiddle.net/GMajE/

これをチェックしてください。あなたがする必要があるのは、次のクラスから float:right を削除することです:

#nav > li { 
display: inline;
float: right;
position: relative;}

そして、.nav_wrapper クラスを次のように変更する必要があります。

.nav_wrapper {
left: 0px;
margin-top: 7px;
padding: 0px;
right: 0px;
Z-index:10;
float:right;}

そしてサブメニューについて。メイン ナビゲーションの li に position:relative を配置し、position:absolute を配置してから、それに応じてサブメニューに left/right/top/bottom を配置する必要があります。ご存知のように、フィドルでサブメニューをセットアップしていません。

于 2012-09-04T13:03:22.080 に答える