<div id="nav">
  <ul id="tabBar">
    <li><a href="../chi_siamo1.htm" rel="menutrigger" name="azienda">L'azienda</a></li>    
    <li><a href="../soluzioni.htm" rel="menutrigger" name="soluzioni">Soluzioni</a></li>
    <li><a href="../clienti.htm" rel="menutrigger" name="clienti">Clienti</a></li>
    <li><a href="../contatti.htm">Contatti</a></li>
  </ul>
  <div id="subNav">
    <ul id="aziendaNav">
      <li><a href="../professionisti.htm" rel="menutrigger" name="staff">&nbsp&nbsp Lo staff &nbsp&nbsp</a></li>
      <li><a href="../strumenti.htm" rel="menutrigger" name="strumenti">&nbsp&nbsp Gli strumenti &nbsp&nbsp</a></li>
      <li><a href="../attivita.htm" rel="menutrigger" name="attivita">&nbsp&nbsp Aree di attivita' &nbsp&nbsp</a></li>
    </ul>
      <ul id="staffNav">
        <li><a href="../staff/staff_member1.htm">&nbsp tizio.caio &nbsp</a></li>
      </ul>
    <ul id="soluzioniNav">
      <li><a href="/#">Programs</a></li>
      <li><a href="/#">Events</a></li>
    </ul>
    <ul id="clientiNav">
      <li><a href="/#">Programs</a></li>
      <li><a href="/#">Events</a></li>
    </ul>

  </div>
</div>

#nav {
  width:100%;
  height:54px;
  margin:0;
  padding:0;
}

#nav * {
  text-align:center;
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  font-family:arial, helvetica, sans-serif;
  font-size:9pt;
}

#nav ul, #nav ul li {
  margin:0;
  padding:0;
  list-tyle-type:none;
}
#nav ul li {
  display:inline;
}

ul#tabBar {
  float:left;
}

ul#tabBar li a {
  display:block;
  float:left;
  width:100px;
  height:29px;
  line-height:39px;
  background:url(../64imgs/tab_bg.jpg) 0 10px no-repeat;
  border-right:4px solid #fff;
  overflow:hidden; /* fixed IE display bug */
}

ul#tabBar li a:hover {
  line-height:29px;
  background:url(../64imgs/tab_bg.jpg) top left no-repeat;
}

#subNav ul {
  display:none;
}

#subNav {
  clear:both;
  height:25px;
  background:url(../64imgs/subnav_bg.jpg) top left repeat-x;
  padding-left:100px;
}

#subNav ul {
  float:left;
  background:url(../64imgs/subnav_seperator.jpg) top left no-repeat;
}

#subNav ul li a {
  display:block;
  float:left;
  width:auto;
  text-align:center;
  line-height:25px;
  background:url(../64imgs/subnav_seperator.jpg) top right no-repeat;
}

#subNav li a:hover {
  color:#cde7ff;
}

function hideItems() {
  var list = document.getElementById("subNav").getElementsByTagName("ul");
  for(i=0;i<list.length;i++) {
    list[i].style.display="none";
  }
}

function navMenu() {
  if (!document.getElementsByTagName){ return; }
  var anchors = document.getElementsByTagName('a');
  
  for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
      
    var relAttribute = String(anchor.getAttribute('rel'));

    if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('menutrigger'))){
      anchor.onclick = function() { 
        var nameAttribute = this.getAttribute('name') + "Nav";
        var thismenu = document.getElementById(nameAttribute);
        hideItems();
        thismenu.style.display="inline";
        return false;
      }
    }
  }
}