-2

このコードを実行すると、ドロップダウン リストが作成されるのはなぜでしょうか?

HTML

   <ul id="menu">
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a>
        <ul>
        <li><a href="">The Team</a></li>
        <li><a href="">History</a></li>
        <li><a href="">Vision</a></li>
        </ul>
      </li>
      <li><a href="">Products</a>
        <ul>
        <li><a href="">Cozy Couch</a></li>
        <li><a href="">Great Table</a></li>
        <li><a href="">Small Chair</a></li>
        <li><a href="">Shiny Shelf</a></li>
        <li><a href="">Invisible Nothing</a></li>
        </ul>
      </li>
      <li><a href="">Contact</a>
        <ul>
        <li><a href="">Online</a></li>
        <li><a href="">Right Here</a></li>
        <li><a href="">Somewhere Else</a></li>
        </ul>
      </li>
    </ul>

CSS

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: block;
  position: relative;
  float: left;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  border-top: 1px solid #fff;
  padding: 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

上記のコードで使用されているすべての CSS プロパティと HTML タグを知っていますが、何らかの理由で、過去 1 時間試してみましたが、まだ完全に理解できていません。ソース:純粋な css ベースのドロップダウン メニューを作成するには?

4

2 に答える 2

1

基本的に、順序付けられていないリストにスタイルを追加して、メニューのように見えて動作するようにします。

各リスト項目をメニュー項目として表示する部分です

ul li {
display: block;
position: relative;
float: left;
}

サブメニューを隠す部分です

li ul {
display: none;
}

これは、各メイン メニュー エントリの上にマウスを移動すると、サブメニューが表示される部分です。

li:hover ul {
display: block;
position: absolute;
}

残りは、フォントと色をフォーマットするためだけです。

于 2013-09-19T11:37:46.703 に答える
0

li にカーソルを合わせると、UL の表示がブロックに設定され、アイテムのドロップダウンが表示されます。

li ul {
display: none;
}

隠されている...

于 2013-09-19T11:35:57.143 に答える