Menu CSS

Come creare un menu verticale o un menu orizzontale drop down tramite codice CSS a partire da Unordered List?
Ovvero come poter creare e manutenere semplicemente dei menu (vedi esempio con nessun abbellimento ) a partire da un codice html scarno come quello visualizzato di seguito?

Il codice da inserire nella pagina html è questo

  <ul id="nav"> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a> 
      <ul> 
        <li><a href="#">Menu 2.1</a></li> 
        <li><a href="#">Menu 2.1</a></li> 
        <li><a href="#">Menu 2.3</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Menu 3</a> 
      <ul> 
        <li><a href="#">Menu3.1</a></li> 
        <li><a href="#">Menu 3.2</a></li> 
      </ul> 
    </li>
    <li><a href="#">Menu 4</a></li> 
  </ul>

Ecco passo passo come procedre nella creazione del foglio di stile.

Si parte dalla rimozione dei pallini

 
	ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

Posizionamento delle voci principali

	ul li {
		position: relative;
		}

Posizionamento dei sotto menu (80 lo modifichiamo a seconda di quanto vogliamo far andare a destra il sotto menu)

	li ul {
		position: absolute;
		left: 80px;
		top: 0;
		display: none;
		}

Comandi aggiuntivi per internet Explorer su ambiente Mac

	/* Fix IE. Hide from IE Mac \*/
	* html ul li { float: left; }
	* html ul li a { height: 1%; }
	/* End */

Visualizzazione dei link al passaggio del mouse

	ul li a {
		display: block;
		padding: 0px;
		}

	li:hover ul { display: block; }

Per Internet Explorer sono necessarie alcune modifiche

	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;

	li:hover ul, li.over ul { 
		display: block; }

Alla fine lo scheletro della pagina web dovrebbe apparire così

	<HTML>
	<HEAD>
	<style>
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px;
		}
	ul li {
		position: relative;
		}
		
	li ul {
		position: absolute;
		left: 149px;
		top: 0;
		display: none;
		}
		
	ul li a {
		display: block;
		padding: 5px;
		}
		
	/* Fix IE. Hide from IE Mac \*/
	* html ul li { float: left; height: 1%; }
	* html ul li a { height: 1%; }
	/* End */

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px;
		}

	li:hover ul, li.over ul { 
		display: block; }
					
	</style>
	<SCRIPT LANGUAGE=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 id="nav">
		<li><a href="#">Menu 1</a></li> 
		<li><a href="#">Menu 2</a> 
		<ul> 
			<li><a href="#">Menu 2.1</a></li> 
			<li><a href="#">Menu 2.1</a></li> 
			<li><a href="#">Menu 2.3</a></li> 
		</ul> 
		</li> 
		<li><a href="#">Menu 3</a> 
		<ul> 
			<li><a href="#">Menu3.1</a></li> 
			<li><a href="#">Menu 3.2</a></li> 
		</ul> 
		</li>
		<li><a href="#">Menu 4</a></li> 
	</ul>


	</BODY>
	</HTML>

Tutti gli abbellimenti li lascio al vostro gusto (colori dei menu, eventi al passaggio del mouse, ecc...) Questo invece il codice CSS per il menu orizzontale

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		}

	li {
	float: left;
	position: relative;
	width: 10em;
	}

	li ul {
	display: none;
	position: absolute; 
	left: 0;
	}

	li > ul {
		top: auto;
		left: auto;
		}

	ul li {
		position: relative;
		}

	ul li a {
		display: block;
		padding: 0px;
		}
		
	/* Fix IE. Hide from IE Mac \*/
	* html ul li { float: left; height: 1%; }
	* html ul li a { height: 1%; }
	/* End */


	li:hover ul, li.over ul { 
		display: block; }