File Under: CSS, HTML, JavaScript

CSS Menus

The code here creates a drop-down menu from HTML list elements using CSS. The code was written for and referenced to in Webmonkey’s Add CSS Drop-Down Menus tutorial.

The Code



<style type="text/css">

ul {

	margin: 0;

	padding: 0;

	list-style: none;


ul li {

	position: relative;

	float: left;

	width: 100px;


li ul {

	position: absolute;

	top: 30px;

	opacity: 0;


ul li a {

	display: block;

	text-decoration: none;

	line-height: 20px;

	color: #777;

	padding: 5px;

	background: #CC0;

	margin: 0 2px;

	display: block;

    -webkit-transition-property: background-color, color, text-shadow;

    -webkit-transition-duration: .5s;

    -webkit-transition-timing-function: ease-in;


ul li a:hover { background: #66F; }

li:hover ul { opacity: 1;

-webkit-transition: opacity 4s linear;



<script type="text/javascript">

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";


 node.onmouseout=function() {

 this.className=this.className.replace(" over", "");











	<li><a href="">Home</a></li>

    <li><a href="">Web</a>


        <li><a href="#">Browser</a></li>

        <li><a href="#">Search</a></li>



    <li><a href="">Monkey</a>


        <li><a href="">Eating Banana</a></li>

        <li><a href="">Throwing Poop</a></li>



    <li><a href="">Contact</a>


        <li><a href="">Via Web</a></li>

        <li><a href="">Via Phone</a></li>

        <li><a href="">Via tin can and string</a></li>






What it Looks Like