La pagina non è online, quindi faccio il copia-incolla della parte del codice (CSS e HTML) relativa al menu (non credo che gli altri elementi siano rilevanti).

codice:
* {
   margin: 0; padding: 0;
   border: none; outline: none;
   color: #000;
   text-decoration: none;
   background-color: transparent;
  }
body {
      font: 10px/1.5 Arial, Verdana, sans-serif;
     }
#menu {
       width: 800px; min-height: 40px;
       margin: 5px auto;
       -moz-box-shadow: 0 0 5px 0 #525C70;
       -webkit-box-shadow: 0 0 5px 0 #525C70;
       box-shadow: 0 0 5px 0 #525C70;
      }
#menu li {
          float: left;
          position: relative;
          list-style-type: none;
         }
#menu a {
         display: block;
         position: relative;
         width: 160px;
         font: bold 2em/40px Arial, Verdana, sans-serif;
         text-align: center;
         text-decoration: none;
         color: #2B4F74;
         background-color: #F2F2F2;
        }
#menu > li:not(:first-child):after {
                                    content: "";
                                    position: absolute;
                                    top: 25%; left: 0;
                                    width: 1px; height: 50%;
                                    background-color: #2B4F74;
                                   }
#menu a:not(#active):hover {
                            background-color: #CBD1D7;
                           }
#menu .flyout {
               position: absolute;
               top: 100%; left: -99999px;
               -moz-box-shadow: 0 5px 5px 0 #525C70;
               -webkit-box-shadow: 0 5px 5px 0 #525C70;
               box-shadow: 0 5px 5px 0 #525C70;
              }
#menu .flyout li:after {
                        content: "";
                        position: absolute;
                        top: 0; left: 25%;
                        width: 50%; height: 1px;
                        background-color: #2B4F74;
                       }
#menu a:hover + .flyout,
#menu .flyout:hover {
                     left: 0;
                    }
#menu .flyout-alt {
                   position: absolute;
                   left: -99999px; top: 5px;
                   -moz-box-shadow: 5px 0 5px 0 #525C70;
                   -webkit-box-shadow: 5px 0 5px 0 #525C70;
                   box-shadow: 5px 0 5px 0 #525C70;
                  }
#menu .flyout-alt li:first-child:after {
                                        display: none;
                                       }
#menu a:hover + .flyout-alt,
#menu .flyout-alt:hover {
                         left: 100%;
                        }
#menu > .flyout-item > a:after {
                                content: url(images/bottom_arrow.png);
                                position: absolute;
                                top: 50%; right: 5px;
                                margin-top: -9px;
                               }
#menu .flyout > .flyout-item > a:after {
                                        content: url(images/right_arrow.png);
                                        position: absolute;
                                        top: 50%; right: 5px;
                                        margin-top: -9px;
                                       }
#menu #active {
               color: #CBD1D7;
               background-color: #2B4F74;
              }
codice HTML:
<ul id="menu">
  <li><a href="#" title="Item 1">Item 1</a>
  <li class="flyout-item"><a href="#" title="Item 2">Item 2</a>
    <ul class="flyout">
      <li><a href="#" title="Item 2.1">Item 2.1</a>
      <li><a href="#" title="Item 2.2">Item 2.2</a>
    </ul>
  <li class="flyout-item" title="Item 3"><a href="#">Item 3</a>
    <ul class="flyout">
      <li class="flyout-item"><a href="#" title="Item 3.1">Item 3.1</a>
        <ul class="flyout-alt">
          <li><a href="#" title="Item 3.1.1">Item 3.1.1</a>
          <li><a href="#" title="Item 3.1.2">Item 3.1.2</a>
          <li><a href="#" title="Item 3.1.3">Item 3.1.3</a>
          <li><a href="#" title="Item 3.1.4">Item 3.1.4</a>
        </ul>
      <li><a href="#" title="Item 3.2">Item 3.2</a>
      <li><a href="#" title="Item 3.3">Item 3.3</a>
    </ul>
  <li class="flyout-item"><a id="active" href="#" title="Item 4">Item 4</a>
    <ul class="flyout">
      <li class="flyout-item"><a href="#" title="Item 4.1">Item 4.1</a>
        <ul class="flyout-alt">
          <li><a href="#" title="Item 4.1.1">Item 4.1.1</a>
          <li><a href="#" title="Item 4.1.2">Item 4.1.2</a>
        </ul>
    </ul>
  <li><a href="#" title="Item 5">Item 5</a>
</ul>
Ps: Ti ringrazio per il consiglio sulla sintassi.