4

私には3つの問題があります：

  1. メニューリンクにカーソルを合わせると「太字」にリンクしたいのですが、そうすると右側のアイテムがわずかに移動します。移動を停止するにはどうすればよいですか？

  2. 「Two」のドロップダウンメニューでは、2つのアイテムの文字数が同じではないにもかかわらず、アイテムが「Two」の真下に適切な間隔で同じ幅の背景で並んで表示されるようにするにはどうすればよいですか。

  3. メニューバーを固定して、下にスクロールしてもページの上部に表示されたままになるようにするにはどうすればよいですか？「position：fixed」を追加しようとしましたが、それだけですべてが台無しになります。

どんな助けでも大歓迎です、ありがとう！

<head>
    <title>Untitled</title>
</head>

<body>
    <div id="wrap">
    <div id="menu">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a>
                <ul>
                    <li><a href="#">Six</a></li>
                    <li><a href="#">Seven</a></li>
                </ul></li> 
                        <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
            <li><a href="#">Five</a></li>
        </ul>
    </div>
    <div id="middle"></div>     
    <div id="footer"></div>
    </div>
</body>

すべてが文字化けしない限り、ここにcssを貼り付ける方法がわからなかったので、スタイルシートへのリンクを次に示します：https ://dl.dropbox.com/u/14754850/stylesheet.css

4

3 に答える 3

3

最初の 2 つの問題に対する答えは次のとおりです。

1)

#menu ul li {
   ...
   width: 90px; /* Give items fixed size */
}

2)

#menu ul li ul li {
   background-color: #2d2d2d; /* Add background */ 
}

#menu ul li ul li:last-child {
   padding-bottom: 10px; /* Dirty fix for last menu item */
}

追加した：

#menu ul li ul li a {
   padding-bottom: 0px; /* Makes drop down items more compact */
}

#menu ul li a { 
   ...
   padding: 10px 20px 10px 20px; /* Give menu headers some spacing */
   ... 
} 

#menu ul {
   padding: 0; /* Fix left space */
}

試してみてください: http://jsfiddle.net/uYTnf/3/

于 2012-11-20T22:34:51.277 に答える
1

メニュー div をラップ div から離すことから始めます。そうすれば、position: fixed で奇妙なことが起こることはありません。

  1. 残念ながら、 width: auto を使用すると、表示される「プッシュ」を制御できません。リスト項目に固定値 (パーセンテージまたはピクセル値) を指定する必要があります。レスポンシブ デザインが可能になるため、パーセンテージが推奨されます。

  2. 背景色が li 要素ではなく ul 要素に適用されていることを確認してください。また、 text-align: center を使用して、それらをきれいに中央に配置します。

  3. 位置: 固定が正解です! top: 0 と left: 0 を設定して、別のブラウザーでバーが変なことをしないようにしてください。また、メインコンテナの上部と下部にパディングがあり、バーが完全に上部にならないようにしています.

これは、#menu li:hover ul変更および#menu ul li ul li追加されたフィドルです。

于 2012-11-20T22:10:58.140 に答える
0

これがここで役立つかどうかはわかりませんが、フィドルです

http://jsfiddle.net/squinny/tJZ25/1/

ul li で、 with を width: 100px; に設定しました。

    #menu ul li {
    text-decoration: none;
    display: inline;
    position: relative;
    float:left;
    width: 100px;

     }
于 2012-11-20T22:37:33.433 に答える