<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
/* barra di navigazione tre livelli due orizzontali uno verticale */
 
* {
    margin: 0px;
    padding: 0px;
} /* semplice reset */
 
#navbar {
    position: relative;
    left: 0px;
    top: 0px;
    list-style-type: none;
}
#navbar a {
    display: block;
    height: 25px;
    width: 180px;
 
    color:white;
    background: #1E5799;
 
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    text-decoration:none;
 
    line-height:22px;
    padding-left:20px;
 
}
 
 
#navbar li {
    float: left;
    list-style-type: none;
}
 
#navbar li ul {
    position: absolute;
    float: left;
    left: 0px;
    top: 26px;
    display:none;
}
 
 #navbar li:hover > ul {
    position:  absolute;
    float: left;
    left: 0px;
    top: 25px;
    display:block;
}
 
 
 
#navbar li ul li ul {
    clear: both;
    position: static;
 
    display:none;
}
 
#navbar li ul li:hover ul {
    clear: both;
    position: static;
    display:block;
}
 
#navbar li ul ul li {
    clear: both;
}
 
 
</style>
 
<style type="text/css">
 
h1,h2,h3,h4,h5,ol,ul,li,p
{font-family:Verdana, Geneva, sans-serif;
 line-height:1.5em;
 }
 
 
 
/* /////////////////////// */
    /* /////////////////////// */
    /* /////////////////////// */
    /* un po' di abbellimento per i browser moderni */
    /* /////////////////////// */
    /* /////////////////////// */
    /* /////////////////////// */
 
 
 
 
 
#navbar a {
 
    text-shadow:1px 1px 1px #000;
 
    opacity:0.9;
 
    border:1px solid teal;
 
    -webkit-border-radius: 8px;
    -webkit-border-top-right-radius: 1px;
    -webkit-border-bottom-left-radius: 1px;
    -moz-border-radius: 8px;
    -moz-border-radius-topright: 1px;
    -moz-border-radius-bottomleft: 1px;
    border-radius: 8px;
    border-top-right-radius: 1px;
    border-bottom-left-radius: 1px;
 
    /* sfumature via http://www.colorzilla.com/gradient-editor/ */
    background: #1E5799; /* old browsers */
 
    background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799),
color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */
 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */
 
    background: -o-linear-gradient(top, #1E5799 0%,#2989D8 50%,#207cca 51%,#7db9e8 100%); /* opera */
    /* /////////////////////// */
    /* /////////////////////// */
    /* /////////////////////// */
}
 
#navbar ul li > a
{
    background: #fceabb; /* old browsers */
 
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* firefox */
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb),
color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* webkit */
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* ie */
 
background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* opera */
}
 
 
#navbar ul ul li  a {
    background: #f3c5bd; /* old browsers */
 
background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* firefox */
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd),
color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200)); /* webkit */
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* ie */
 
background: -o-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* opera */
}
 
#navbar a:hover {
 
    /* /////////////////////// */
    /* /////////////////////// */
    /* /////////////////////// */
    /*hover generale per abbellire con una sfumatura */
 
    background: #9dd53a; /* old browsers */
 
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a),
color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* webkit */
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* ie */
 
background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* opera */
/* /////////////////////// */
/* /////////////////////// */
/* /////////////////////// */
}
 
/* /////////////////////// */
 
h1 {
    clear: both;
}
#layout{
    width:808px;
    margin-right: auto;
    margin-left: auto;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
 
 
</style>
</head>
 
<body>
<div id="layout" >
 
 
  <!-- html ipsum kitchen sink -->
  <h1>HTML Ipsum Presents</h1>
  <p>&nbsp;</p><ul id="navbar">
    <li><a href="#">home</a></li>
    <li> <a href="#">prodotti</a>
      <ul>
        <li><a href="#">hardware</a></li>
        <li><a href="#">software</a>
          <ul>
            <li><a href="#">windows</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">Iphone</a></li>
          </ul>
        </li>
        <li><a href="#">mobile</a></li>
        <li><a href="#">telefonia</a>
          <ul>
            <li><a href="#">Wind</a></li>
            <li><a href="#">Telecom</a></li>
 
          </ul></li>
      </ul>
    </li>
    <li><a href="#">servizi</a>
      <ul>
        <li><a href="#">consulenza</a></li>
        <li><a href="#">formazione</a>
          <ul>
            <li><a href="#">windows</a></li>
            <li><a href="#">linux</a></li>
            <li><a href="#">Iphone</a></li>
          </ul>
        </li>
        <li><a href="#">internazionale</a></li>
        <li><a href="#">telefonia</a>
 
          <ul>
            <li><a href="#">Wind</a></li>
            <li><a href="#">Telecom</a></li>
 
          </ul></li>
      </ul>
 
    </li>
    <li><a href="#">contatti</a></li>
  </ul>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.
</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum,
elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>
in turpis pulvinar facilisis. Ut felis.</p>
 
<h2>Header Level 2</h2>
 
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>
 
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna.
 Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa.
 Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit
amet quam. Vivamus pretium ornare est.</p></blockquote>
 
<h3>Header Level 3</h3>
 
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>
 
<pre><code>
#header h1 a {
    display: block;
    width: 300px;
    height: 80px;
}
</code></pre>
 
</div>
 
</body>
</html>
 





File per Giovanni con correzioni