How do I implement a 'drop down within a drop down' in HTML/CSS?

Question

So here is the html code for the contents of my first drop down menu:

<nav id="side-nav" style="display:none;">
    <ul id="side-nav-content">
        <li>
            <a href="#">Information for Current Students</a>    
        </li>
        <li>
            <a href="#">Timetables & Programme Structures</a>
        </li>
        <li>
            <a href="#">Support Services</a>
        </li>
    </ul>
</nav>

So i'm trying to implement dynamic sub drop down menus for each of the three list items.

I originally tried adding a list within a list however that was just a shot in the dark and I never really expected it to work. I'm pretty stumped and am just looking for a pointer to the best way to go about doing this.

Answer 1

你可以看到这个例子，＆＃34; Twitter Bootstrap Responsive Navbar with Multiple Dropdown（Childrens）＆＃34;这里： https://github.com/fontenele/bootstrap-navbar-dropdowns/blob/master/README.md