ul.menu
{
  position: relative;
  background: url(../images/menu-gradient.png) repeat center;
  display: block;
  border-bottom: 1px solid #ccc;
  width: 100%;
  height: 25px;
  list-style: none;
  color: #000;
}
ul.menu, ul.menu ul
{
  margin: 0;
  padding: 0;
  display: block;
}
ul.menu li
{
  position: relative;
  list-style: none;
  float: left;
  height: 100%;
}
ul.menu li span, ul.menu li a
{
  padding: 5px 1em 0 1em;
}
ul.menu ul li
{
  width: 17em;
  height: 1.5em;
  padding-bottom: .2em;
}
ul.menu li a, 
ul.menu li a:visited, 
ul.menu li a:active, 
ul.menu li a:hover, 
ul.menu li span
{
  display: block;
  width: auto;
  color: #000;
  text-decoration: none;
}
ul.menu li,
ul.menu li.menu-hover li a,
ul.menu li.menu-hover-children li a,
ul.menu li.menu-hover li.menu-hover li a,
ul.menu li.menu-hover-children li.menu-hover-children li a,
ul.menu li.menu-hover li.menu-hover li.menu-hover li a,
ul.menu li.menu-hover-children li.menu-hover-children li.menu-hover-children li a
{
  font-size: 11px;
  color: #000;
}
ul.menu li:hover,
ul.menu li.menu-hover, 
ul.menu li.menu-hover-children 
{
  background: #e1e6e8;
  border-bottom: none;
  cursor: hand;
}
ul.menu ul li
{
  border: solid 1px #e5e5e5;
}
ul.menu ul li:hover,
ul.menu ul li.menu-hover,
ul.menu ul li.menu-hover-children
{
  background: #e1e6e8;
  border: solid 1px #316ac5;
  cursor: hand;
}
ul.menu ul
{
  width: 17em;
  border: solid 1px #CCC;
  background: #e5e5e5;
  position: absolute;
  visibility: hidden;
  top: 25px;
}
ul.menu ul ul
{
  top: -2px;
  left: 17.2em;
}

/* menu with child items */
ul.menu ul li.menu-children
{
  background: url(../images/submenu.gif) no-repeat right;
}
ul.menu ul li.menu-hover-children
{
  background: #e1e6e8 url(../images/submenu.gif) no-repeat right;
}

/* Add more rules here if your menus have more than three (6) tiers */
ul.menu li:hover ul ul, 
ul.menu li.menu-hover ul ul,
ul.menu li.menu-hover-children ul ul,
ul.menu li li:hover ul ul, 
ul.menu li li.menu-hover ul ul,
ul.menu li li.menu-hover-children ul ul,
ul.menu li li li:hover ul ul, 
ul.menu li li li.menu-hover ul ul,
ul.menu li li li.menu-hover-children ul ul,
ul.menu li li li li:hover ul ul, 
ul.menu li li li li.menu-hover ul ul,
ul.menu li li li li.menu-hover-children ul ul
{
  visibility: hidden;
}

/* Add more rules here if your menus have more than three (6) tiers */
ul.menu li:hover ul, 
ul.menu li li:hover ul, 
ul.menu li li li:hover ul, 
ul.menu li li li li:hover ul, 
ul.menu li li li li li:hover ul, 
ul.menu li.menu-hover ul, 
ul.menu li.menu-hover-children ul, 
ul.menu li li.menu-hover ul, 
ul.menu li li.menu-hover-children ul, 
ul.menu li li li.menu-hover ul,
ul.menu li li li.menu-hover-children ul, 
ul.menu li li li li.menu-hover ul,
ul.menu li li li li.menu-hover-children ul, 
ul.menu li li li li li.menu-hover ul,
ul.menu li li li li li.menu-hover-children ul,
ul.menu li li li li li.menu-hover-children ul, 
ul.menu li li li li li li.menu-hover ul,
ul.menu li li li li li li.menu-hover-children ul
{
  visibility: visible;
}

/* separator */
ul.menu ul li .menu-separator, ul.menu ul .menu-separator:hover
{
  border: none;
  border-top: 1px solid #ccc;
}
.menu-vertical ul.menu li
{
  width: 100%;
}