1

メニューにカーソルを合わせるとサブメニューが表示される、このサイドパネルの垂直ナビゲーションがあります。私の問題は、divコンテナが原因で、サブメニューとサブメニューの子が表示されないことです。

divコンテナ[side-panel-links]の幅は240pxなので、切り取っています。divコンテナの幅を拡張すると、サブメニューが表示されます。

サブメニューをdivコンテナとオーバーラップさせて、これらのサブメニューを表示するにはどうすればよいですか？

これがデモです：http：//jsfiddle.net/xkBZE/1/

HTMLコードのスニペットは次のとおりです。

    <div class="side-panel-links left">
    <div class="side-panel-links-scroll">
        <div id="myslidemenu" class="jqueryslidemenu">
            <ul id="side-panel-list">
                <li>
                    <a href="#">Test 1</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
                <li>
                    <a href="#">Test 2</a>
                    <ul class="side-panel-list-child">
                        <li>Test 2-1
                            <ul class="side-panel-list-child">
                                <li>Test 2-1-1
                                    <ul class="side-panel-list-child">
                                        <li>Test 2-1-1-1
                                            <ul class="side-panel-list-child"></ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>Test 2-1-2
                                    <ul class="side-panel-list-child"></ul>
                                </li>
                            </ul>
                        </li>
                        <li>Test 2-2
                            <ul class="side-panel-list-child">
                                <li>Test 2-2-1
                                    <ul class="side-panel-list-child"></ul>
                                </li>
                            </ul>
                        </li>
                        <li>Test 2-3
                            <ul class="side-panel-list-child">
                                <li>Test 2-3-1
                                    <ul class="side-panel-list-child">
                                        <li>Test 2-3-1-1
                                            <ul class="side-panel-list-child"></ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Test 3</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
                <li>
                    <a href="#">Test 4</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
            </ul>
        </div>
    </div>
</div>​

ありがとう！

4

1 に答える 1

0

まず第一に、すべてに同じ ID を使用するべきではありません。それがクラスの目的です。ボックスの外側に何かを表示するにはposition: absolute;z-index:100;、その要素で使用します。この場合は<ul>、<li>.

お役に立てれば

私はあなたのcssに頭を包むことができなかったので、これに変更しました：

-->更新された css

.side-panel-links{
width: 240px;
background-color: #272727;
padding-top: 25px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif ;
}
.jqueryslidemenu ul li ul{
left: 0;
display: block;
visibility: hidden;
}
#side-panel-list{
list-style-type: none;
margin: 0;
padding: 0;
}
#side-panel-list li {
border-top: 1px solid #353535;
border-bottom: 1px solid #191919;
padding: 10px 0 10px 20px;
margin: 0;
}
#side-panel-list li ul{
position: absolute;
left: 300px;
display: list-item;
}
#side-panel-list li a {
color: #EEE;
margin: 0 50px 0 0;
width: 161px;
display: list-item;
color: white;
padding: 8px 8px;
border-right: 1px solid #CCCCCC;
text-decoration: none;
}
#side-panel-list li ul li{
padding: 5px;
display: block;
background-color: red;
}
#side-panel-list li a:link,
#side-panel-list li a:visited {
color: white;
}
#side-panel-list li a:hover{
background: black;
color: #426BA4;
}​​​​​​​​​​​​​​​

これは機能しますが、以前と同じ外観を得るには、もう少しスタイリングが必要です。お役に立てれば。

于 2012-10-28T23:53:28.627 に答える