0

css2 つのサブメニューを持つ垂直ナビゲーション メニューを作成しました。

しかし、それらが適切に機能するように、それらを 1 つの列に配置する方法がわかりません。これは可能ですか？

html

 <ul>
   <li><a href="#">works</a>

     <ul>

        <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
      <ul>
             <li><a href="#">Category 1</a></li>
             <li><a href="#">Category 2</a></li>
             <li><a href="#">Category 3</a></li>
             <li><a href="#">Category 4</a></li>
             <li><a href="#">Category 5</a></li>
          </ul>

        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
     </ul>

   </li>

   <li><a href="#">photos</a>
    <ul>

     <li><a href="#">something</a></li>
     <li><a href="#">something</a></li>
    </ul>

  </li>

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

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

    </ul>
  </div></html>

CSS

#menu {
font-size: 14px;
font-family: "Courier New", Courier, monospace;

}
#menu ul {
margin: 0px;
list-style-type: none;
}
#menu ul li {
position: relative;
}
#menu ul li a {
line-height: normal;
color: #000;
text-decoration: none;
}
#menu ul li ul {
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
z-index: 99999;
width: 180px;
}


#menu ul li ul li {
min-width: 180px;
}
#menu ul li ul ul {
float: left;
top: 0px;
}
#menu ul li:hover > ul { display:block;


}
4

1 に答える 1

1

まず、html 構造が乱雑です。クリーンな構造は次のようになります。

<div id="menu">
  <ul>
    <li>
      <a href="#">works</a>
      <li>
        <a href="#">works subcategory</a>
        <ul>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
        </ul>
      </li>
      <li><a href="#">Category 1</a></li>
      <li><a href="#">Category 2</a></li>
      <li><a href="#">Category 3</a></li>
      <li><a href="#">Category 4</a></li>
      <li><a href="#">Category 5</a></li>
    </li>
    <li><a href="#">something</a></li>
    <li><a href="#">something</a></li>
    <li>
      <a href="#">photos</a>
      <ul>
        <li><a href="#">something</a></li>
        <li><a href="#">something</a></li>
      </ul>
    </li>
    <li><a href="#">friends</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>

タグを閉じるのに間違いがありました..そして、ドロップダウンメニューを作成するときにcssリセットを使用することをお勧めします。ユーザーエージェントの事前定義されたスタイルが問題になるため（Normalize.cssを試してください）

CSS: 第 2 レベルのブロックをフロートする必要はありません。また、ulリスト項目の位置プロパティを相対に設定し、子 ul に top および left プロパティを使用することは適切な解決策ではありません。

私はあなたのメニューを少しスタイリングしました。ここで表示できます: http://codepen.io/anon/pen/sdomr

于 2013-01-10T21:45:49.050 に答える