0

私は順序付けられていないリスト (ナビゲーション メニュー) を作成しようとしています。このリストでは、ボタンをクリックすると右側ではなく、3 番目のレベルが下にドロップします。ここに似たもの -

http://themeforest.net/item/adminica-the-professional-admin-template/full_screen_preview/160638

ボタンをクリックすると 3 番目のレベルが表示されるようにするスクリプトがあります。しかし、私は3番目のレベルを下げることができません。右側に来ます。

私のコード -

<ul class="drop">
            <li><a href="#">Home</a></li>
            <li>Dashboard
                <ul>
                    <li><a href="#">Student Activity</a></li>
                    <li><a href="#">Departments</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">News and Events</a></li>
                    <li><a href="#">Content Management</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>                 
                </ul>
            </li>
            <li>Student Info
                 <ul>
                    <li><a href="#">Example 1</a>
                        <ul class="drawer">
                            <li><a href="#">Third level 1</a></li>
                            <li><a href="#">Third level 2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Example 2</a>
                        <ul class="drawer">
                            <li><a href="#">Third level 1</a></li>
                            <li><a href="#">Third level 2</a></li>
                            <li><a href="#">Third level 3</a></li>
                            <li><a href="#">Third level 4</a></li>
                            <li><a href="#">Third level 5</a></li>
                            <li><a href="#">Third level 6</a></li>
                        </ul>
                    </li>                        
                </ul>
            </li>
            <li><a href="#">Teacher Info</a></li>
            <li><a href="#">Add+</a></li>
            <li><a href="#">Student Report</a></li>
            <li><a href="#">Teacher Report</a></li>
</ul>

CSS -

ul.drop a {
display:block; 
}
ul.drop, ul.drop li, ul.drop ul { 
margin: 0; 
padding: 0; 
border: 1px solid #fff; 
background: #555; 
color: #fff;
}
ul.drop { 
position: relative; 
z-index: 597; 
float: left; 
}
ul.drop li { 
float: left; 
line-height: 1.3em; 
vertical-align: middle; 
zoom: 1; 
padding: 5px 10px; 
}
ul.drop li.hover, ul.drop li:hover { 
position: relative; 
z-index: 599; 
cursor: default; 
background: #1e7c9a; 
}
ul.drop ul { 
visibility: hidden; 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 598; 
width: 195px; 
background: #555; 
border: 1px solid #fff; 
}
ul.drop ul li { 
float: none; 
}
ul.drop ul ul { 
top: -2px; 
left: 100%;  
}
ul.drop li:hover > ul { 
visibility: visible 
}

私は助けを探しています:)ありがとう。

4

1 に答える 1

0

次のように CSS を更新します (コメント行は古いステートメントです)。

ul.drop ul ul {
  position:static;
  display:none;
  width:100%;
  /*top: -2px; */
  /*left: 100%;  */
}
ul.drop li:hover > ul { 
  visibility: visible;
  display: block;
}

ただし、おそらく、第 3 レベルのメニューのスタイルをさらに調整する必要があります。

例: jsFiddle

于 2013-02-28T05:47:34.527 に答える