0

最近、数か月前に、あるサイトのドロップダウン メニューにサブレベル機能を追加する必要がありました。以前に取った戦術は、ナビゲーションの 1 つの列に対してはうまくいきましたが、その前の列にサブレベルを追加するように求められましたが、相対配置を使用していたため機能しませんでした (以下の例を参照)。

<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; }
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }

/* これはドロップダウンのサブレベル用です */ #nav li:hover ul li ul {display: none} #nav li ul li:hover ul { display: block; } #nav li ul li ul li { 位置: 相対的; 左: 188px; 下:25px;左パディング:1px}

そこで、ドロップダウン メニューのサブレベルを変更して、オーバーラップ アプローチを使用した相対的な配置を使用しました (以前のコーダーが最初にドロップダウンを設計した方法のため)。新しいコードは次のようになります。

#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }

ただし、タイトルが示しているように、順序付けられていないリストの下にある LI は現在、互いに積み重なっています。次々に垂直に表示する代わりに。フロートをクリアする必要があると思いますが、上で行われたようです。したがって、サブリストのリンクが垂直に表示されるようにするために、フロートを再定義してからクリアする必要があるかどうかはわかりません。

編集：

HTML を追加して、これを実行しようとしている方法を示すことをお勧めします。

<html>
<head>
<style type="text/css">
#div#mycontent { overflow: visible; }
#nav ul { font-family: Arial, Verdana; font-size: 10px; margin: 0; padding: 0; list-style: none; font-weight: bold; }
#nav ul li { display: block; float: left; margin: 0;}
#nav li ul { display: none; }
#nav ul li a { display: block; text-decoration: none; color: #3c1c4e; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #f0e8d8; margin-left: 1px; white-space: nowrap; }
#nav ul li a:hover { background: #f0e8d8; }
#nav li:hover ul { display: block; position: absolute; z-index: 0;}
#nav li:hover li { float: none; font-size: 11px; }
#nav li:hover a { background: #f0e8d8; }
#nav li:hover li a:hover { background: #fff7e7; }
/* This is for sublevels in the drop down */
#nav li:hover ul li ul {display: none}
#nav li ul li:hover ul { display: block; }
#nav li ul li ul li { position: absolute; left: 125px; bottom: 0px; border-style: solid; border-width: 1px; border-color:purple; z-index: 1; }
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
    <li><a href="#">Column 1</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
    <li> <a href="#">Column 2</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
    <li><a href="#">Column 3</a><li>
</ul>
</div>
</body>
</html>
4

1 に答える 1

2

ドロップダウンで、サブレベルに対して次の CSS ルールを試してください。

/* This is for sublevels in the drop down */
     #nav li:hover ul li ul {
        display: none
    }
    #nav li ul li:hover ul {
        display: block;
        position:absolute;
        top:0;
        left:100%;
    }
    #nav li ul li ul li {
        position:relative;
        display: block;
        float: left;
        border: 1px solid purple;
        z-index: 1;
    }
于 2013-05-21T20:04:35.267 に答える