Third level in HTML un-ordered list

Question

I've been trying to make an un-ordered list(navigation menu), in which the third level will drop downwards instead of right side on click of a button. Something similar to the one here -

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

I've the script for it which makes the third level appear on click of a button. But i'm not able to bring the third level down. Its coming on the right side.

My code -

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

I'm looking for a help :) Thanks.

Answer 1

Update the CSS like this(commented lines are old statements):

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

However, you'll probably want to further adjust the styling for the third level menu.

Example: jsFiddle