0

うまくいけば、私が取り組んできたこのメニューの最後の部分です。ナビゲーションのメイン部分のようにサブメニューのドロップダウンが水平になりますが、子 li は各 li ごとに粗く大きくなり、問題は親が子 li の幅に合わせようとしていることです。子の li 幅を auto に保ち、親に幅を割り当てようとしましたが、間違った数字をすべて選択しているか、親に幅を割り当てるたびにドロップダウンが垂直になるため、機能していません. 私のホスト サーバーも、ftp で送信するたびに正しく更新されていないようです。そのため、ランダムなサイズを入力して、自分が持っているものと一致する必要があるものを確認することが非常に難しくなっています。

jsFiddle リンクはそれをすべて示していますが、サブメニューを非表示にするための本文のオンロードを取得できませんでした: jsFiddle

そのため、テスト サイトも表示することをお勧めします。Test Site

4

2 に答える 2

0

ねえ、ドロップダウン メニューが必要だと思います

私はいくつかの例を作成しました

HTML

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

    <ul class="submenu">
    <li><a href="#">Home</a></li>
  <li><a href="#">Home2</a></li>
  <li><a href="#">Home3</a></li>
  <li><a href="#">Home4</a></li>
  <li><a href="#">Home5</a></li>
    </ul>

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

</ul>

CSS

ul, ul li{
margin:0;
  padding:0;
}
.navi, .submenu{
  list-style:none;
  display:block;
  margin:0;
  padding:0;
}
.navi > li{
background:green;
  display:inline-block;
  vertical-align:top;
  position:relative;
}
.navi li a{
color:white;
  padding:10px;
  display:block;
  text-decoration:none;
}
.navi li .submenu{
display:none;
  position:absolute;
  top:39px;
  left:0;
}
.navi li:hover .submenu{
display:block;
}
.submenu > li{
display:block;
background:red;
}

.submenu li > a{
border-top:2px solid black;
display:block;
}

ライブデモhttp://tinkerbin.com/GoDsKf4n

于 2012-07-03T07:46:22.817 に答える
0

この場合、次のように親子階層を維持する必要があります-

#navigation li ul.sub_navigation li{......}

更新されたフィドル - http://jsfiddle.net/eETjb/2/

于 2012-07-03T06:21:42.623 に答える