0

水平ドロップダウン メニューに奇妙な問題があります。以下のコードを見つけてください。

私のHTMLメニュー部分は次のようになります-

<div id="page-wrap">
<ul class="dropdown">

        <li><a href="#"><img src="images/home.png" border="0"></a></li>

        <li><a href="#"><img src="images/aboutus.png" border="0"></a></li>

        <li><a href="#"><img src="images/profile.png" border="0"></a>
             <ul id="submenu">
              <li id="firstItem"><img src="images/submenu_center_top.png"></li>
              <li><a href="#">Support Team</a></li>
              <li id="lastItem"><img src="images/submenu_bottom.png"></li>
             </ul>
            </li>

        <li><a href="#"><img src="images/activities.png" border="0"></a>

         <ul id="sub_menu">

              <div><img src="images/submenu_center_top.png">
              <li><a href="#">Nutrition &amp; Tips</a></li>

              <div><img src="images/submenu_bottom.png"></div>
              </ul>

        </li>

        <li><a href="#"><img src="images/shiningstars.png" border="0"></a></li>

        <li><a href="#"><img src="images/testimonials.png" border="0"></a></li>

        <li><a href="#"><img src="images/gallery.png" border="0"></a>
         <ul id="sub_menu">

              <div><img src="images/submenu_center_top.png">
              <li><a href="#">Photo Gallery</a></li>
              <li><a href="#">Audio Visual Gallery</a></li>

          <li><a href="#">In Press</a></li>

          <li><a href="#">Articles</a></li>

              <div><img src="images/submenu_bottom.png"></div>
         </ul>

        </li>

        <li><a href="#"><img src="images/eventsnews.png" border="0"></a>

         <ul id="submenu">

              <div><img src="images/submenu_center_top.png">
          <li><a href="#">Upcoming Events</a></li>

              <div><img src="images/submenu_bottom.png"></div>
             </ul>

        </li>

        <li><a href="#"><img src="images/contactus.png" border="0"></a></li>
         </ul>
       </div>

私のCSSファイルには次のコードが含まれています：

#page-wrap {
 width: 1004px; margin: 0;
}
a {
 text-decoration: none;
}
ul {
 list-style: none; 
}
ul.dropdown {
 position: relative;
}
ul.dropdown li {
 font-weight: normal; float: left; zoom: 1; /*background: #ccc; */
}
ul.dropdown a:hover {
 color: #fff;
}
ul.dropdown a:active {
 color: #ffa500;
}
ul.dropdown li a {
 display: block;
 padding: 0px 0px 0px 0px;
 /*border-right: 1px solid #333;
 color: #000;*/
}
ul.dropdown li:last-child a {
 border-right: none;
} /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
 background: #1C1C1C;
 /*color: white;*/
 position: relative;
}
ul.dropdown li.hover a {
 color: black;
} /*LEVEL TWO*/
ul.dropdown ul {
 width: 200px;
 visibility: hidden;
 position: absolute;
 width: 100%;
 top: 100%;
 /*margin-left: -90px;*/
 left: 0; 
}
ul.dropdown ul li {
 font-weight: normal;
 font-size: 12px;
 background: #333333;
 color: #969696; 
 /*border-bottom: 1px solid #ccc;*/
 border-left: 5px solid #969696;
 border-right: 5px solid #969696;
 /*float: left;*/
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
 border-right: none;
 width: 100%;
 display: inline-block;
} /*LEVEL THREE*/
ul.dropdown ul ul {
 left: 100%;
 top: 0;
}
ul.dropdown li:hover > ul { 
 visibility: visible; 
}
#firstItem, #lastItem {
 background: none;
 border-left: none;
 border-right: none;
}
.sub_menu {
 float: center;
}

IE 8 と Chrome の両方でも奇妙な結果が得られています。調整が行われていないだけです。誰かが助けてくれますか？私はHTMlとCSSに比較的慣れていません。

前もって感謝します！

4

1 に答える 1

0

ここではさまざまなことが起こっています。

ただし、配置の問題に対する最も簡単な答えは、ul#sub_menuにパディングがあることです。

これでパディングをゼロにします：

.sub_menu { padding: 0px; }

[更新: あなたの html はclass="sub_menu"の代わりに使用する必要がありid="sub_menu"ます。同じ ID の要素が複数ある場合、HTML は無効です]

最近の一般的な方法は、一連の「リセット」で CSS ファイルを開始することです。これにより、一連の一般的なタグのデフォルトのパディングとマージンが 0 に変更されるため、不要な場合にスペーシングの問題が発生することはありません。たとえば、私が通常使用するリセットの例:

body, div, ul, ol, li, p, h1, h2, h3
{ padding: 0px; margin: 0px; }

あなたのコードで気づいた、あなたを助けるかもしれない他のこと：

  • float: center有効じゃない。有効な値は、left、right、both、none、inherit のみです。
  • ul.dropdown ul ul何も参照しません。ul は 2 レベルしかありませんが、このセレクターは 3 つの ul の深さを参照します。この CSS は、おそらくドロップダウン メニューの例から取得したものです。第 3 レベルのドロップダウンが必要ない場合は、将来混乱しないように、この CSS を削除することをお勧めします。
  • visibility: hidden、visibility: visible、 と を使用することをお勧めしdisplay: noneますdisplay: block。その理由は、非visibility: hidden表示であるにもかかわらず、ページのスペースを占有しているからです。 display: noneただし、DOM 要素をまったくレンダリングせず、ページ スペースを占有しません。
  • 一部のサブメニューに<div>は、タグの直接の子要素として要素があります。要素<ul>のみが直接の子として許可されます<li>
  • という名前の要素と という名前の要素がsub_menuありsubmenuます。スタイルを正しく適用するには、一貫した名前を付ける必要があります。

ここにあなたのコードを含む jsFiddleと、私が言及したすべての変更があります。何が起こっているのかを確認しやすいように、li と背景の色に幅を追加しました。

于 2013-08-08T14:02:26.197 に答える