<p>/* Son of Suckerfish Dropdowns<br>
  ---------------------------------------------------------<br>
  Originally developed by Patrick Griffiths and Dan Webb<br>
  http://www.htmldog.com/articles/suckerfish/dropdowns/<br>
  ---------------------------------------------------------<br>
  NOTE: After a deep research, we decide to divide this<br>
  CSS into 2 parts. The first part will define the layout.<br>
  The second part will define the visual look for this menu.<br>
  ---------------------------------------------------------*/</p>
<p>/*--------------------------- LAYOUT ----------------------------*/<br>
  #ja-mainnav, #ja-mainnav ul {<br>
  padding: 0;<br>
  margin: 0;<br>
  line-height: 20px;<br>
  }</p>
<p>#ja-mainnav a {<br>
  display: block;<br>
  line-height: 20px;<br>
  margin: 0;<br>
  padding: 10px 20px;<br>
  }</p>
<p>#ja-mainnav li { /* all list items */<br>
  float: left;<br>
  margin: 0;<br>
  padding: 0;<br>
  }</p>
<p>#ja-mainnav li ul { /* second-level lists */<br>
  position: absolute;<br>
  width: 202px;<br>
  /*<br>
  * Using left instead of display to hide menus because display: none isn't<br>
  * read by screen readers<br>
  */<br>
  left: -999em;<br>
  }</p>
<p>#ja-mainnav ul ul a { /* sub-links */<br>
  width: 160px;<br>
  }</p>
<p>#ja-mainnav li ul ul { /* third-and-above-level lists */<br>
  margin: -42px 0 0 200px;<br>
  }</p>
<p>#ja-mainnav li:hover ul ul,<br>
  #ja-mainnav li:hover ul ul ul,<br>
  #ja-mainnav li.sfhover ul ul,<br>
  #ja-mainnav li.sfhover ul ul ul {<br>
  left: -999em;<br>
  }</p>
<p>#ja-mainnav li:hover ul,<br>
  #ja-mainnav li li:hover ul,<br>
  #ja-mainnav li li li:hover ul,<br>
  #ja-mainnav li.sfhover ul,<br>
  #ja-mainnav li li.sfhover ul,<br>
  #ja-mainnav li li li.sfhover ul { /* lists nested under hovered list items */<br>
  left: auto;<br>
  }<br>
  /*--------------------------- VISUAL ----------------------------*/<br>
  /* -------- All levels -------- */<br>
  #ja-mainnavwrap {<br>
  border-top: 1px solid #175396;<br>
  background: #175396;<br>
  }<br>
  #ja-mainnav ul, #ja-mainnav li {<br>
  background-image: none;<br>
  list-style: none;<br>
  }</p>
<p>#ja-mainnav span.separator {<br>
  display:none;<br>
  }</p>
<p>/* -------- Top level -------- */<br>
  #ja-mainnav &gt; ul {<br>
  background-color: #175396;<br>
  padding-left: 20px;<br>
  }</p>
<p>#ja-mainnav &gt; ul &gt; li {<br>
  background-color: #175396;<br>
  border-left: 1px solid #175396;<br>
  border-right: 1px solid #175396;<br>
  margin-right: 1px;<br>
  }</p>
<p>#ja-mainnav &gt; ul &gt; li.active {<br>
  background: url(../images/arrow2.png) no-repeat bottom center #175396;<br>
  color: #175396;<br>
  }</p>
<p>#ja-mainnav &gt; ul &gt; li:hover,<br>
  #ja-mainnav &gt; ul &gt; li:active,<br>
  #ja-mainnav &gt; ul &gt; li:focus {<br>
  background: url(../images/arrow2.png) no-repeat bottom center #175396;<br>
  color: #FFFFFF;<br>
  }</p>
<p>/* -------- sub-levels -------- */<br>
  #ja-mainnav ul ul li {<br>
  border-left: 1px solid #175396;<br>
  border-right: 1px solid #175396;<br>
  border-top: 1px solid #175396;<br>
  border-bottom: 1px solid #175396;<br>
  margin-bottom: 1px;<br>
  }</p>
<p>#ja-mainnav li ul { /* second-level lists */<br>
  background-color: #175396;<br>
  }</p>
<p>#ja-mainnav li a {<br>
  color: #175396;<br>
  font-weight: bold;<br>
  text-decoration: none;<br>
  }</p>
<p>#ja-mainnav ul ul  li:hover,<br>
  #ja-mainnav ul ul  li:active,<br>
  #ja-mainnav ul ul  li:focus {<br>
  background: #175396;<br>
  color: #FFFFFF;<br>
  }<br>
  /*old css*/<br>
  /* Son of Suckerfish Dropdowns<br>
  ---------------------------------------------------------<br>
  Originally developed by Patrick Griffiths and Dan Webb<br>
  http://www.htmldog.com/articles/suckerfish/dropdowns/<br>
  ---------------------------------------------------------<br>
  NOTE: After a deep research, we decide to divide this<br>
  CSS into 2 parts. The first part will define the layout.<br>
  The second part will define the visual look for this menu.<br>
  ---------------------------------------------------------*/</p>
<p>#ja-mainnav ul.menu {<br>
  margin: 0; /* all lists */<br>
  padding: 0;<br>
  float: left;<br>
  border-right: 1px solid #175396;<br>
  }</p>
<p>#ja-mainnav ul.menu ul {<br>
  margin: 0; /* all lists */<br>
  padding: 0;<br>
  }</p>
<p>#ja-mainnav ul.menu li {<br>
  margin: 0; /* all list items */<br>
  padding: 0;<br>
  float: left;<br>
  display: block;<br>
  background: none;<br>
  cursor: pointer;<br>
  position: relative;<br>
  list-style: none;<br>
  }</p>
<p>#ja-mainnav ul.menu li ul {<br>
  width: 16.4em;<br>
  position: absolute; /* second-level lists */<br>
  z-index: 99;<br>
  height: auto;<br>
  w\idth: 15.9em;<br>
  }</p>
<p>#ja-mainnav ul.menu li ul ul {<br>
  margin: -1.5em 0 0 14em; /* third-and-above-level lists */<br>
  }</p>
<p>#ja-mainnav ul.menu li li {<br>
  padding: 0 1em 0 0;<br>
  margin: 0;<br>
  width: 14.9em;<br>
  }</p>
<p>#ja-mainnav ul.menu ul a {<br>
  width: 14.8em;<br>
  w\idth: 10.8em;<br>
  }</p>
<p>#ja-mainnav ul.menu li ul {<br>
  left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */<br>
  }</p>
<p>#ja-mainnav ul.menu li:hover ul ul, #ja-mainnav ul.menu li:hover ul ul ul,<br>
  #ja-mainnav ul.menu li.sfhover ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul, #ja-mainnav ul.menu li.activesfhover ul ul,<br>
  #ja-mainnav ul.menu li.sfhover ul ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul ul, #ja-mainnav ul.menu li.activesfhover ul ul ul {<br>
  left: -999em;<br>
  }</p>
<p>/* This &quot;unhides&quot; the sub-menus (left: -999em is what hides them) */<br>
  #ja-mainnav ul.menu li:hover ul, #ja-mainnav ul.menu li li:hover ul, #ja-mainnav ul.menu li li li:hover ul,<br>
  #ja-mainnav ul.menu li.sfhover ul, #ja-mainnav ul.menu li.parentsfhover ul, #ja-mainnav ul.menu li.parent-activesfhover ul, #ja-mainnav ul.menu li.activesfhover ul,<br>
  #ja-mainnav ul.menu li li.sfhover ul, #ja-mainnav ul.menu li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li.activesfhover ul,<br>
  #ja-mainnav ul.menu li li li.sfhover ul, #ja-mainnav ul.menu li li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li li.activesfhover ul {<br>
  left: auto;<br>
  }</p>
<p>/* STYLING THE MENU<br>
  -----------------------------------*/<br>
  /* 1st level */<br>
  #ja-mainnav ul.menu li a {<br>
  margin: 0;<br>
  padding: 10px 20px;<br>
  border-left: 1px solid #175396;<br>
  border-right: 1px solid #175396;<br>
  display: block;<br>
  color: #175396;<br>
  font-weight: bold;<br>
  line-height: normal;<br>
  text-decoration: none;<br>
  }</p>
<p>#ja-mainnav ul.menu li a:hover,<br>
  #ja-mainnav ul.menu li a:active,<br>
  #ja-mainnav ul.menu li a:focus {<br>
  background: url(../images/arrow2.png) no-repeat bottom center #175396;<br>
  color: #FFFFFF;<br>
  }</p>
<p>#ja-mainnav ul.menu li {<br>
  margin: 0;<br>
  }</p>
<p>#ja-mainnav ul.menu li:hover,<br>
  #ja-mainnav ul.menu li.sfhover,<br>
  #ja-mainnav ul.menu li.parentsfhover,<br>
  #ja-mainnav ul.menu li.parent-activesfhover {<br>
  background: url(../images/arrow2.png) no-repeat bottom center #175396;<br>
  color: #FFFFFF;<br>
  }</p>
<p>#ja-mainnav ul.menu li.active a,<br>
  #ja-mainnav ul.menu li.active a:hover,<br>
  #ja-mainnav ul.menu li.active a:active,<br>
  #ja-mainnav ul.menu li.active a:focus {<br>
  background: url(../images/arrow2.png) no-repeat bottom center #175396;<br>
  color: #FFFFFF;<br>
  }</p>
<p>/* 2nd level and above */<br>
  #ja-mainnav ul.menu li ul {<br>
  border: 1px solid #175396;<br>
  background: url(../images/opaque.png);<br>
  }</p>
<p>#ja-mainnav ul.menu li ul li {<br>
  border-top: 1px solid #175396;<br>
  border-bottom: 1px solid #175396;<br>
  background: none;<br>
  }</p>
<p>#ja-mainnav ul.menu li ul a {<br>
  border-right: none;<br>
  margin: 0;<br>
  padding: 7px 10px;<br>
  background: none;<br>
  color: #175396;<br>
  font-weight: normal;<br>
  line-height: normal;<br>
  text-transform: none;<br>
  }</p>
<p>#ja-mainnav ul.menu li.havesubchild,<br>
  #ja-mainnav ul.menu li.havesubchild-active {<br>
  background: url(../images/bullet2.gif) no-repeat 94% 50%;<br>
  }</p>
<p>#ja-mainnav ul.menu li ul a:hover,<br>
  #ja-mainnav ul.menu li ul a:active,<br>
  #ja-mainnav ul.menu li ul a:focus,<br>
  #ja-mainnav ul.menu ul li:hover,<br>
  #ja-mainnav ul.menu ul li.sfhover,<br>
  #ja-mainnav ul.menu ul li.havesubchildsfhover,<br>
  #ja-mainnav ul.menu ul li.havesubchild-activesfhover,<br>
  #ja-mainnav ul.menu ul ul li:hover,<br>
  #ja-mainnav ul.menu ul ul li.sfhover,<br>
  #ja-mainnav ul.menu ul ul li.havesubchildsfhover,<br>
  #ja-mainnav ul.menu ul ul li.havesubchild-activesfhover {<br>
  background: #175396;<br>
  color: #175396;<br>
  }</p>
<p>#ja-mainnav ul.menu ul li.active a,<br>
  #ja-mainnav ul.menu ul li.active a:hover,<br>
  #ja-mainnav ul.menu ul li.active a:active,<br>
  #ja-mainnav ul.menu ul li.active a:focus {<br>
  background: none !important;<br>
  color: #FFFFFF;<br>
  font-weight: bold;<br>
  }</p>
<p>#ja-mainnav ul.menu li.active li a,<br>
  #ja-mainnav ul.menu li.active li a:hover,<br>
  #ja-mainnav ul.menu li.active li a:active,<br>
  #ja-mainnav ul.menu li.active li a:focus {<br>
  background: none !important;<br>
  }</p>
<p>#ja-mainnav h3 {<br>
  display: none;<br>
  }</p>
<p>#ja-mainnav .moduletable_menu {<br>
  background: none;<br>
  margin: 0;<br>
  padding: 0;<br>
  }</p>
