Séries de Web: Menus – Estilo Ziz Zag

<style type="text/css">
.menu{ 
	position:absolute; 
	top:0px; 
	left:0px; 
	background-color:#CCC; 
	width:360px; 
	height:100%;
	min-height:100%;
	padding:10px;
}
ul#menu {
	margin:0;
	padding:0;
	list-style-type:none;
}
ul#menu li {
	margin: 0 0 2px;
	width:190px;
	text-align:center;
	background-color:#666666;
}
ul#menu .right {
	display:block;
	float:right;
	clear:both;
}
ul#menu .left {
	display:block;
	float:left;
	clear:both;
}
ul#menu li a:link, ul#menu li a:visited, ul#menu li a:active {
	display:block;
	text-decoration:none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#FFF;
	padding:8px 0;
}
ul#menu li a:hover {
	color:#000;
	background-color:#999999;
}
</style>

<style type="text/css"> .menu{ position:absolute; top:0px; left:0px; background-color:#CCC; width:360px; height:100%; min-height:100%; padding:10px; } ul#menu { margin:0; padding:0; list-style-type:none; } ul#menu li { margin: 0 0 2px; width:190px; text-align:center; background-color:#666666; } ul#menu .right { display:block; float:right; clear:both; } ul#menu .left { display:block; float:left; clear:both; } ul#menu li a:link, ul#menu li a:visited, ul#menu li a:active { display:block; text-decoration:none; font-family: Geneva, Arial, Helvetica, sans-serif; font-size:15px; color:#FFF; padding:8px 0; } ul#menu li a:hover { color:#000; background-color:#999999; } </style>

<div class="menu">
  <ul id="menu">
    <li class="left"><a href="">Menu 1</a></li>
    <li class="right"><a href="">Menu 2</a></li>
    <li class="left"><a href="" id="prod">Menu 3</a></li>
    <li class="right"><a href="">Menu 4</a></li>
    <li class="left"><a href="" id="contato">Menu 5</a></li>
   </ul>
</div>

<div class="menu"> <ul id="menu"> <li class="left"><a href="">Menu 1</a></li> <li class="right"><a href="">Menu 2</a></li> <li class="left"><a href="" id="prod">Menu 3</a></li> <li class="right"><a href="">Menu 4</a></li> <li class="left"><a href="" id="contato">Menu 5</a></li> </ul> </div>