Horizontal dropdown menubar - Vertical dropdown menubar

Question

Hi,
I would need help to turn a horizontal dropdown menubar to a vertical dropdown menubar. I am not experienced with CSS so don't know how to change code correctly. I would like to get submenu going vertically beside main menu.
http://www.villalotus.net/TEST/test.htm
Thanks in advance!

Answer 1

Thank you Ken!
Unfortunately I didn't find help from tutorials. I manged to turn menu vertically but submenu goes on top of main menu.
  /*main nav*/
nav {
          margin-left: auto;
          margin-right: auto;
ul {
          padding: 0;
          margin: 0;
nav ul {
          list-style: none;
          font-weight: bold;
          font-size: 20px;
          margin: 5px;
          width: 180px;
nav ul ul {
          display: none;
          margin: 0px;
          padding: 0px;
nav ul li {
           position: relative;
nav ul a {
          display: block;
          width: 160px;
          text-align: center;
          text-decoration: none;
          color: #fff;
          border: 1px solid #004c99;
          border-radius: 8px;
          margin-right: auto;
          margin-left: auto;
          padding-top: 5px;
          padding-right: 9px;
          padding-bottom: 5px;
          padding-left: 9px;
nav ul a:active       {
          background: rgba(255,255,255,0.4);
          color: #FFF;
nav ul li a:hover, ul a:focus {
          text-decoration: none;
          background-color: #6699cc;
          color: #FFFFFF;
nav ul a:link, nav ul a:visited {
          background: rgba(255,255,255,0.2);
          color: #FFFFFF;
nav ul li a {
          margin-top: 0px;
nav ul ul li {
            position: relative;
nav ul ul li a {
          color: #fff;
          margin: 0px;
nav ul ul li a:hover {
          background: #6699cc;
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
          background-color: #3370AD;
nav ul li:hover {
          margin-top: 0px;
nav ul li:hover> ul{
          display: block;
          position: relative;
nav ul:after {
          content: "";
          clear: both;
          display: block;
Message was edited by: Karonaful