Question

我一直试图制作一个无序列表（导航菜单），其中第三级将在点击按钮时向下而不是向右下降。类似于这里的东西 -

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

我有它的脚本，它使得第三级出现在点击按钮上。但我无法降低第三级。它来自右侧。

我的代码 -

<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 
}

我正在寻求帮助:)谢谢。

Answer 1

像这样更新CSS（注释行是旧语句）：

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

但是，您可能希望进一步调整第三级菜单的样式。

示例：jsFiddle

HTML无序列表中的第三级

1 个答案: