Progetto di pagine web

Menu a tendine.

Foglio di stile: Europa.css

#menu {
	/* Centrare orizzontalmente il menu nella pagina */
  position: absolute;
  left:50%; /* misura relativa alla proprietà position */
  margin-left: -260px; /* misura relativa alla finestra del browser */
  /* ad ogni voce di menu (Ved. proprietà "#menu li:hover ul") è stata assegnata
     la proprietà width:130px, quindi la barra del menu, composta da quattro voci,
	 è larga 130x4=520px. Per centrare il menu si assegna margin-left:260px */
  
  padding: 0;
  border:1px solid #D76120;
  background: #2D4E6C;
  list-style:none;
  font:1em Trebuchet MS;
}

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

#menu li {
  float:left;
  margin: 0;
  padding: 0;
  color:black;
}

#menu a:link, #menu a:visited {
  display: block;
  padding: 4px 16px;
  color: #fff;
  text-decoration: none;
}

#menu a:hover,
#menu a:focus,
#menu a:active {
  background-color: #D76120;
  color: #FFFFFF;
  text-decoration: none;
}

#menu li ul {
  display: none;
}

#menu li:hover ul {
  display: block;
  position: absolute;
  z-index:1;
  width:130px;
  padding: 0;
  margin: 0 0 0 -1px;
  border:1px solid #D76120;
  background: #2D4E6C;
  font-size:.8em;
}

#menu li li {
  border-bottom:1px solid #D76120;
  width: 130px;
}

Pagina con menu

In questo esempio la pagina richiamata viene aperta nell'iframe. Ad ogni link si deve assegnare il nome dell'iframe alla proprietà target del tag a.
In alternativa, bisogna aggiungere il menu ad ogni pagina richiamata. 

<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="Europa.css" />
</head>
<h1>Turismo in Europa</h1>
<ul id="menu">
 <li><a href="#">Italia</a>
  <ul>
   <li><a href="Roma.htm" target="riquadro">Roma</a></li>
   <li><a href="#">Milano</a></li>
   <li><a href="#">Torino</a></li>
 </ul>
 </li>
<li><a href="#">Spagna</a>
  <ul>
   <li><a href="#">Madrid</a></li>
   <li><a href="#">Barcelona</a></li>
   <li><a href="#">Zaragoza</a></li>
 </ul>
 </li>
<li><a href="#">Germania</a>
  <ul>
   <li><a href="#">Berlin</a></li>
   <li><a href="#">Munchen</a></li>
   <li><a href="#">Kholn</a></li>
 </ul>
 </li>
<li><a href="#">Gran Bretagna</a>
  <ul>
   <li><a href="#">London</a></li>
   <li><a href="#">Liverpool</a></li>
   <li><a href="#">Manchester</a></li>
 </ul>
 </li>
<li><a href="#">Francia</a>
 <ul>
  <li><a href="#">Paris</a></li>
  <li><a href="#">Lille</a></li>
  <li><a href="#">Metz</a></li>
</ul>
</li>
</ul>
<br style="clear:left" /><br /><br />
<iframe name="riquadro"></iframe>
<body>
</body>
</html>