2

ドロップダウン メニューの第 3 レベルの表示に問題があります。第 3 レベルは、第 2 レベルの親と適切に整列していません。いずれかの親をクリックすると、3 番目のレベルが一番上から始まります。もちろん、それは絶対位置付けと top:0 が原因である可能性があります。位置を相対的に変更しようとしましたが、フォーカスされている親メニュー項目が展開されます。Top 属性の値を変更しても役に立ちません。私が見つけたものと同じくらい単純な代替 css を見つけることができません。

HTML

<div id="menu">
<ul id="menu">
    <li><span>Home</span></li>
    <li><span>Test-L1</span>
        <ul>
            <li><span>Test-L2A</span></li>
            <li><span>Test-L2B</span>
                <ul>
                    <li><span>Test-L3A</span></li>
                    <li><span>Test-L3B</span></li>
                </ul>
            </li>
            <li><span>Test-L2C</span>
                <ul>
                    <li><span>Test-L3C</span></li>
                    <li><span>Test-L3D</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

CSS

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

Jsfiddle http://jsfiddle.net/85sZy/

IE9 と Chrome v29 で試しました。上記の css で結果が得られない場合は、その目的に役立つ代替 css を提供してください。それでも、上記の css の修正版を好みます。

4

2 に答える 2

3

どうぞ。

解決策 1: LI 要素に相対的な位置を手動で追加する

ワーキングデモ

HTML:

<div id="menu">
    <ul id="menu">
        <li><span>Home</span></li>
        <li><span>Test-L1</span>
            <ul>
                <li><span>Test-L2A</span></li>
                <li class="levelThreeAlign"><span>Test-L2B</span>
                    <ul>
                        <li><span>Test-L3A</span></li>
                        <li><span>Test-L3B</span></li>
                    </ul>
                </li>
                <li class="levelThreeAlign"><span>Test-L2C</span>
                    <ul>
                        <li><span>Test-L3C</span></li>
                        <li><span>Test-L3D</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS:

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

.levelThreeAlign{position:relative;}

解決策 2 : スタイルシートで相対位置を使用して CSS 継承タイプを作成する

ワーキングデモ

HTML:

<div id="menu">
    <ul id="menu">
        <li><span>Home</span></li>
        <li><span>Test-L1</span>
            <ul>
                <li><span>Test-L2A</span></li>
                <li><span>Test-L2B</span>
                    <ul>
                        <li><span>Test-L3A</span></li>
                        <li><span>Test-L3B</span></li>
                    </ul>
                </li>
                <li><span>Test-L2C</span>
                    <ul>
                        <li><span>Test-L3C</span></li>
                        <li><span>Test-L3D</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS:

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul > li{position:relative;}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

お役に立てれば。

于 2013-09-09T13:13:45.167 に答える
0

HTML

<div id="menu-container">
    <ul id="menu">
        <li><span>Home</span></li>
        <li><span>Test-L1A</span>
            <ul>
                <li><span>Test-L2A</span></li>
                <li><span>Test-L2B</span>
                    <ul>
                        <li><span>Test-L3A</span></li>
                        <li><span>Test-L3B</span></li>
                    </ul>
                </li>
                <li><span>Test-L2C</span>
                    <ul>
                        <li><span>Test-L3C</span></li>
                        <li><span>Test-L3D</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    <li><span>Test-L2A</span></li>
    </ul>
</div>

CSS

#menu-container * {
  float: left;
  display: inline-block;
  padding: 0; margin: 0;
  list-style:none;
  position: relative;
}
#menu-container span {
  cursor:pointer;
  background: #ccc;
  padding: 6px;
  margin: 6px;
  overflow: hidden;
  white-space: nowrap;
}
#menu ul {
  position: absolute;
}
/*first level*/
#menu > li > ul {
  left: 0;
  top: 100%;
}
/*other levels*/
#menu > li > ul > li ul {
  left: 100;
  top: 0%;
}
/*hide and show on hover*/
#menu li > ul li {
  display: none;
}
#menu li:hover > ul > li {
  display: block;
}

デモ: http://codepen.io/anon/pen/tBxwK

于 2013-09-09T14:17:19.487 に答える