Dropdown list example

by Sven Knockaert

HTML

<ul>
    <li> o Operating System ▸
        <div class="hidden-div">
            <a href="#">Introduction </a>
            <a href="#">Synchronization</a>
            <a href="#">Memory &amp; Cache management</a>
            <a href="#">File system</a>
            <a href="#">Storage management</a>
            <a href="#">Management of process and threads</a>
            <a href="#">Deadlock</a>
        </div>
    </li>
    <li> o Data Structures ▸
        <div class="hidden-div">
            <a href="#">Basics</a>
            <a href="#">Singly Linked List</a>
            <a href="#">Doubly Linked list</a>
            <a href="#">Trees</a>
            <a href="#">Hash</a>
            <a href="#">Graphs</a>
        </div>
    </li>
</ul>

CSS

li {
	float: left;
	width: 200px;
	height: 30px;
	list-style: outside none none;
	border: 1px solid rgb(125, 153, 202);
	text-align: left;
	padding: 10px;
	border-radius: 1px;
	font-size: 12px;
	font-weight: bold;
	color: rgb(255, 255, 255);
	background-color: rgb(96, 96, 96);
}

.hidden-div {
	margin-top: 26px;
	visibility: hidden;
}

.hidden-div a {
	display: block;
	padding: 12px 16px;
	color: blue;
	background-color: rgb(200, 200, 200);
}

li:hover .hidden-div {
	visibility: visible;
}