title: css vertical drop down menu like wascc.com.au
body: <p>I would like to create a CSS vertical menu like the one active @ <a href="http://www.wascc.com.au/" rel="nofollow">http://www.wascc.com.au/</a></p>
  
  <p>However, I am converting this website to Wordpress, so the HTML generating the menu is different to the original.</p>
  
  <p>The new Wordpress site is @ <a href="http://test.doig.com.au/wascc/" rel="nofollow">http://test.doig.com.au/wascc/</a></p>
  
  <p>This is the new Wordpress HTML menu:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    ul#menu-primary-menu li {
          font: 16px/51px oswaldregular;
          color: #48391f;
          background: url(/images/navi-shap.jpg) 0 0 no-repeat;
          float: left;
          text-transform: uppercase;
      }
      ul#menu-primary-menu li a {
          text-decoration: none;
          color: #48391f;
          display: block;
          padding: 0 25px;
      }
      .sub-menu li a {
          background: url(/images/dropdown_arrow_white.png) no-repeat center left;
          display: block;
          min-width: 110px;
          color: black;
          text-decoration: none;
          padding: 0px 9px;
          color: #FFFFFF;
          font: 12px/30px oswaldregular;
      }
      .sub-menu, .sub-menu ul {
          border-top: 3px solid #fcbb38;
          border-radius: 0 0 2px 2px;
          -moz-border-radius: 0 0 2px 2px;
          -webkit-border-radius: 0 0 2px 2px;
          -khtml-border-radius: 0 0 2px 2px;
          -o-border-radius: 0 0 2px 2px;
          -ms-border-radius: 0 0 2px 2px;
          margin: 0;
          padding: 0;
          position: absolute;
          left: 2px;
          top: 0;
          list-style-type: none;
          background: #333333;
          visibility: hidden;
          display: none;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;ul id="menu-primary-menu" class="menu"&gt;&lt;li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-67"&gt;&lt;a href="http://test.doig.com.au/wascc/"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"&gt;&lt;a href="http://test.doig.com.au/wascc/about-us/"&gt;About Us&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
       &lt;li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"&gt;&lt;a href="http://test.doig.com.au/wascc/about-us/contact-us/"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"&gt;&lt;a href="http://test.doig.com.au/wascc/about-us/committee/"&gt;Committee&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"&gt;&lt;a href="http://test.doig.com.au/wascc/about-us/constitution/"&gt;Constitution&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"&gt;&lt;a href="http://test.doig.com.au/wascc/about-us/life-members/"&gt;Life Members&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-79"&gt;&lt;a href="http://test.doig.com.au/wascc/calendar/"&gt;Calendar&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
       &lt;li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-100 current_page_item menu-item-102"&gt;&lt;a href="http://test.doig.com.au/wascc/calendar/race-calendar-2016/"&gt;Race Calendar 2016&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-80"&gt;&lt;a href="http://test.doig.com.au/wascc/competition/"&gt;Competition&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
       &lt;li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"&gt;&lt;a href="http://test.doig.com.au/wascc/competition/categories/"&gt;Categories&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"&gt;&lt;a href="http://test.doig.com.au/wascc/competition/standing-regs/"&gt;Standing Regs&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"&gt;&lt;a href="http://test.doig.com.au/wascc/competition/licenses/"&gt;Licenses&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"&gt;&lt;a href="http://test.doig.com.au/wascc/competition/results/"&gt;Results&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"&gt;&lt;a href="http://test.doig.com.au/wascc/competition/entries/"&gt;Entries&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-87"&gt;&lt;a href="http://test.doig.com.au/wascc/membership/"&gt;Membership&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
       &lt;li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"&gt;&lt;a href="http://test.doig.com.au/wascc/membership/sign-up-for-membership/"&gt;Sign up for Membership&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"&gt;&lt;a href="http://test.doig.com.au/wascc/membership/gift-cards/"&gt;Gift Cards&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-90"&gt;&lt;a href="http://test.doig.com.au/wascc/officials/"&gt;Officials&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
       &lt;li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"&gt;&lt;a href="http://test.doig.com.au/wascc/officials/accreditations/"&gt;Accreditations&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"&gt;&lt;a href="http://test.doig.com.au/wascc/officials/affiliations/"&gt;Affiliations&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"&gt;&lt;a href="http://test.doig.com.au/wascc/officials/disciplines/"&gt;Disciplines&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-95"&gt;&lt;a href="http://test.doig.com.au/wascc/v8-supercars/"&gt;V8 Supercars&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
       &lt;li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"&gt;&lt;a href="http://test.doig.com.au/wascc/v8-supercars/overview/"&gt;Overview&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"&gt;&lt;a href="http://test.doig.com.au/wascc/v8-supercars/travel-information/"&gt;Travel Information&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"&gt;&lt;a href="http://test.doig.com.au/wascc/v8-supercars/circuit-map/"&gt;Circuit Map&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"&gt;&lt;a href="http://test.doig.com.au/wascc/v8-supercars/tickets-corporate/"&gt;Tickets &amp;amp; Corporate&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-73"&gt;&lt;a href="http://test.doig.com.au/wascc/activities/"&gt;Activities&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
       &lt;li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"&gt;&lt;a href="http://test.doig.com.au/wascc/activities/bike-days/"&gt;Bike Days&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"&gt;&lt;a href="http://test.doig.com.au/wascc/activities/corporate-venue-hire/"&gt;Corporate Venue Hire&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"&gt;&lt;a href="http://test.doig.com.au/wascc/activities/drive-days/"&gt;Drive Days&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"&gt;&lt;a href="http://test.doig.com.au/wascc/activities/karts/"&gt;Karts&lt;/a&gt;&lt;/li&gt;
       &lt;li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"&gt;&lt;a href="http://test.doig.com.au/wascc/activities/your-car-our-track/"&gt;Your Car Our Track&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But this needs to be added to, to complete the drop down behaviour.</p>
  
  <p>Assistance appreciated.</p>
  
  <p>Steve.</p>