javascript - HTML无序列表中的第三级

我一直在尝试制作一个无序列表（导航菜单），其中第三级将向下单击，而不是单击按钮时位于右侧。与此处类似的内容-

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
}

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

最佳答案

像这样更新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