0

UL / LIリスト（ホバーに表示されるサブUL / LIリストを含む）を水平ナビゲーションバーとサブ水平ナビゲーションバーに変換するCSSベースのナビゲーションバーを作成しようとしています。私の現在の実装（図を参照）は、サブリストがposition：absoluteを使用して、ホバーされた要素の下の位置を取得することを除いて機能します。絶対位置のサブメニューはコンテナの端を尊重しないため、これが私の問題の原因であると考えています。ブラウザが小さくなりすぎると、トップレベルのメニューが折り返される間にコンテナの端からブリードします。私が抱えているもう1つの問題は、トップレベルのメニューが折り返されるときにページが垂直方向に展開されないことです。そのため、スペースを多く取っても、次の段落は下に移動せず、重なります。

誰かがCSSのヒントを持っているか、私が作成しようとしているようなメニューの良い例を知っていますか？

画像へのリンク：http： //i47.tinypic.com/288tbn7.png

4

2 に答える 2

0

今日でも、HTMLDogによる「SonofSuckerfish Dropdowns」という記事は、ホバーを使用したクリーンなCSSメニューの定番です。

http://www.htmldog.com/articles/suckerfish/dropdowns/

于 2012-08-07T04:07:58.053 に答える
0

ちょっと今、このul liように簡単に使用できるこのメニューを作成します

HTML

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Home2</a></li>
  <li><a href="#">Home3</a>

    <ul class="submenu">
      <li><a href="#">Submenu</a></li>
      <li><a href="#">Submenu</a></li>
      <li><a href="#">Submenu</a></li>
    </ul>

  </li>
  <li><a href="#">Home4</a></li>
  <li><a href="#">Home5</a></li>
</ul>

Css

    .menu{
display:block;
  list-style:none;
  border-bottom:solid 1px red;
  float:left;
}
.menu > li{
  float:left;
  position:relative;
}
.menu > li + li{
  border-left:solid 1px red;
margin-left:10px;
}
.menu > li > a{
display:block;
  margin-left:10px;
}

.submenu{
  display:none;
list-style:none;
  position:absolute;
  top:20px;
  left:-39px;
  white-space:nowrap;
}
.menu > li:hover .submenu{
display:block;
}
.submenu li{
display:inline;
}
.submenu li + li {
border-left:1px solid green;
  margin-left:10px;
}
.submenu a{
display:inline-block;
  vertical-align:top;
  margin-left:10px;
}

ライブデモ

そして今css according to your layoutを変更しますこれは基本的なステップです

于 2012-08-07T04:31:34.030 に答える