File Under: CSS, HTML, JavaScript
Feb
15
2010

CSS Menus

By

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

<html>



<head>





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



}

</style>



<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", "");

  }

  }

 }

 }

}

window.onload=startList;

</script>





</head>

<body>

<ul>

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

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

      <ul>

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

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

      </ul>

    </li>

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

      <ul>

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

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

      </ul>

    </li>



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

      <ul>

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

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

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

      </ul>

    </li>



</ul>

</body>

</html>

What it Looks Like

Tags: