<style type="text/css">
/* ================================================================
  This copyright notice must be untouched at all times.
  The original version of this stylesheet and the associated (x)html
  is available at http://www.cssplay.co.uk/menus/final_drop.html
  Copyright (c) Stu Nicholls. All rights reserved.
  This stylesheet and the associated (x)html may be modified in any
  way to fit your requirements.
  =================================================================== */
  .menu {/*width:745px;*/background:#D7DFE5; height:30px; position:relative; 
    z-index:-1; border:1px solid #585752; font-family:arial, sans-serif;}
  /* remove all the bullets, borders and padding from the default list styling */
  .menu ul {padding:0;margin:0;list-style-type:none;}

  /* remove all the bullets, borders and padding from the default list styling */
  .menu ul {padding:0;margin:0;list-style-type:none;}
  /*
  .menu ul a.drop{background:#D7DFE5 url(images/arrow-down.png) no-repeat 110px center;color: #627A96;}
  .menu ul a.drop:hover{background:#A2B1C2 url(images/arrow-down.png) no-repeat 110px center;color: #FFFFFF;}
  */
  .menu ul a.drop{background:#D7DFE5;color:#627A96;
    background-image: url(images/shadowdown.png);
    background-position: left top;
    background-repeat: repeat-x;}
  .menu ul a.drop:hover{background:#A2B1C2;color: #FFFFFF;
    background-image: url(images/shadowdown.png);
    background-position: left top;
    background-repeat: repeat-x;}  

  /* float the list to make it horizontal and a relative 
    positon so that you can control the dropdown menu positon */
  .menu li {float:left;position:relative;}
  /* style the links for the top level */
  .menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; 
    color:#627A96; height:30px; border:1px solid #585752; 
    border-width:0px 1px 1px 0px; background:#D7DFE5; padding-left:30px; 
    padding-right:30px; line-height:30px; font-weight:bold;
    background-image: url(images/shadowdown.png);
    background-position: left top;
    background-repeat: repeat-x;}
    
  /* style the second level background */
  .menu ul ul a.drop, .menu ul ul a.drop:visited {
    background:#E9E9E9 url(images/arrow-right.png) no-repeat 170px center;}
    /* style the second level hover */
  .menu ul ul a.drop:hover{
    background:#A2B1C2 url(images/arrow-right.png) no-repeat 170px center;}
  .menu ul ul :hover > a.drop {
    background:#A2B1C2 url(images/arrow-right.png) no-repeat 170px center;}
  /* style the third level background */
  .menu ul ul ul a, .menu ul ul ul a:visited {background:#F5F5F5;}
  /* style the third level hover */
  .menu ul ul ul a:hover {background:#A2B1C2;}

  /* hide the sub levels and give them a positon absolute so that they 
    take up no room */
  .menu ul ul {visibility:hidden; position:absolute;height:0;
    top:30px;left:-1;border-top:1px solid #000000;}
  /* another hack for IE5.5 */
  * html .menu ul ul {top:30px;top:30px;}

  /* position the third level flyout menu */
  .menu ul ul ul{left:211px;top:-1px;}

  /* position the third level flyout menu for a left flyout */
  .menu ul ul ul.left {left:-190px;}

  /* style the table so that it takes no ppart in the layout - 
    required for IE to work */
  .menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

  /* style the second level links */
  .menu ul ul a, .menu ul ul a:visited {background:#E9E9E9; color:#000000; 
    height:30px; line-height:30px; padding:5px 10px; width:190px;
    border-width:0 1px 1px 1px;}

  /* style the top level hover */
  .menu a:hover, .menu ul ul a:hover{color:#FFFFFF; background:#A2B1C2;
    background-image: url(images/shadowdown.png);
    background-position: left top;
    background-repeat: repeat-x;}
  .menu :hover > a, .menu ul ul :hover > a {color:#FFFFFF; background:#A2B1C2;
    background-image: url(images/shadowdown.png);
    background-position: left top;
    background-repeat: repeat-x;}

  /* make the second level visible when hover on first level list OR link */
  .menu ul li:hover ul,
  .menu ul a:hover ul{visibility:visible;}
  /* keep the third level hidden when you hover on first level list OR link */
  .menu ul :hover ul ul{visibility:hidden;}
  /* make the third level visible when you hover over second level list OR link */
  .menu ul :hover ul :hover ul{ visibility:visible;}
</style>