2

2 層のドロップダウン、メニュー、サブメニューを作成していますが、相対的または絶対的な配置、またはフロートに問題があります。私はabsoluteで遊んで、スペース/ギャップはなくなりましたが、私のサブメニューはホバーされたアイテムの隣に飛び出さず、最初のアイテムだけです。私はrelativeとfloatの両方を試してみましたが、両方とも望ましくないギャップを生み出しましたが、サブメニューはホバーされたアイテムの隣に飛び出しました。ここに問題があると思われるコードがあります。作業コード例を確認できるように、JSFIDDLE を作成したことに注意してください。

HTML と CSS を含む JSFIDDLEを次に示します。ギャップはありますが、フライアウトの位置が正しいコードを配置しました。物事をより明確にする必要がある場合は、お知らせください。試してみます。

問題のあるコード - 私は思う

.sub-navigation-content {
    position: relative;
    margin: 0 0 0 150px;
    top: -10px;
    width: 180px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    visibility: hidden;
    box-shadow: 0 5px 10px 0 #999;
}

以下は、私が望むもののスクリーンショットです。

フライアウトの見た目は正しいが、フライアウトの位置が正しくない:

ここに画像の説明を入力

フライアウトの見た目は正しくないが、フライアウトの位置は正しい:

ここに画像の説明を入力

ご覧いただきありがとうございます:)

4

2 に答える 2

4

そうそう...絶対位置を使用できますが、 remove が必要ですtop: -10px;。

サブナビゲーション コンテンツの最終クラス:

.sub-navigation-content {
    position: absolute;
    margin: 0 0 0 150px;
    width: 180px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    visibility: hidden;
    box-shadow: 0 5px 10px 0 #999;
}

その働きは良いと思います。また、必要に応じてマージンを変更することで、フライアウト リストを一番上に移動できます。

.sub-navigation-content {
    position: absolute;
    margin: -35px 0 0 150px;
    width: 180px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    visibility: hidden;
    box-shadow: 0 5px 10px 0 #999;
}
于 2013-06-02T17:19:30.427 に答える