title: Sub sub-menu doesn't behave as it should
body: <p>I'm having a problem with one of the sub-menus I've been experimenting on. The sub sub-menu for Partial doesn't behave like it should. This is a back-up navbar for our company website just in case the other isn't approved. I've used different codes for both and the other is working fine so no problem there. </p>
  
  <p>I want the sub-menu for Partial to curtain to the right instead of below it.</p>
  
  <p>This new one is a combination of codes I found.</p>
  
  <p>Here's the code: <a href="https://jsfiddle.net/shamrocksdee/20rgfom5/" rel="nofollow noreferrer">https://jsfiddle.net/shamrocksdee/20rgfom5/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="menu-wrap"&gt;
      &lt;nav class="menu"&gt;
          &lt;ul class="clearfix"&gt;
              &lt;li&gt;&lt;a href=""&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="" href=""&gt;ABOUT &lt;span class="arrow"&gt;&amp;#9660;&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                      &lt;li&gt;&lt;a href=""&gt;M - V - V&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;CHOOSE US&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;li&gt;&lt;a href=""&gt;PROGRAMS&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="current-item" href=""&gt;EVENTS &lt;span class="arrow"&gt;&amp;#9660;&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                          &lt;li&gt;&lt;a href=""&gt;SCHEDULE&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;li&gt;&lt;a href=""&gt;CLIENTS &lt;span class="arrow"&gt;&amp;#9660;&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                          &lt;li&gt;&lt;a&gt;PARTIAL LIST &lt;span class="arrow"&gt;&amp;#9658;&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                          &lt;li&gt;&lt;a href=""&gt;PUBLIC&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;IN-HOUSE&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;TESTIMONIALS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;li&gt;&lt;a href=""&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="" rel="ddsubmenu3"&gt;SOCIAL&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
      background:#ffffff /*url('body-bg.jpg')*/;
  }
  
  container {
      position: absolute;
      width: 1000px;
  }
  
  
  .clearfix:after {
      display:block;
      clear:both;
      content:"";
  }
  
  // Menu Outline
  .menu-wrap {
      width:100%;
      display: block;
      box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2);
      background:#3e3436;
  }
  
  .menu {
      width:1400px;
      margin-left:2.2%;
      margin-top:3.6%;
      height:78px; 
      float:left; 
      padding-left:5px; 
      padding-top:5px; 
      margin-bottom:10px;
      z-index:100;
  }
  
  .menu li {
      margin:0px;
      list-style:none;
      font-family:'Raleway';
      font-weight:bold !important;}
      .menu a {
      transition:all linear 0.15s;
      color:#919191;
  }
  
  .menu li:hover &gt; a, .menu .current-item &gt; a {
      text-decoration:none;
      color:#d3d3d3;
      display: block;
  }
  
  .menu .arrow {
      font-size:11px;
      line-height:0%;
  }
  
  // Top Level
  .menu &gt; ul &gt; li {
      float:center;
      display:inline-table;
      position:relative;
      font-size:19px;
  }
  
  .menu &gt; ul &gt; li &gt; a {
      padding:10px 40px;
      display:inline-table;
      text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
  }
  
  .menu &gt; ul &gt; li:hover &gt; a, .menu &gt; ul &gt; .current-item &gt; a {
      background:#2e2728;
  }
  
  // Bottom Level
  .menu li:hover .sub-menu {
      z-index:1;
      opacity:1;
      float: none; 
  }
  
  .sub-menu {
      width:160%;
      padding:5px 0px;
      position:absolute;
      top:100%;
      left:0px;
      z-index:-1;
      opacity:0;
      transition:opacity linear 0.15s;
      box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
      background:#2e2728;
  }
  
  .sub-menu li {
      display:block;
      font-size:16px;
  }
  
  .sub-menu li a {
      padding:10px 30px;
      display:block;
  }
  
  .sub-menu li a:hover, .sub-menu .current-item a {
      background:#3e3436;
  }
  
  .sub-menu ul {
      width:160%;
      position: absolute;
      padding:0;
      left:0;
      display:none; /* hides sublists */
      z-index:-1;
      opacity:0;
      transition:opacity linear 0.15s;
      box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
      background:#2e2728;
      float: none;
  }
  
  // hides sub-sublists
  .sub-menu li:hover ul ul {
      display:none;
  } 
  
  // shows sublist on hover
      .sub-menu li:hover ul {
      display: block;
      position:relative;
  } 
  
  .sub-menu li ul li:hover ul {
      font-size:16px;
      display: block; /* shows sub-sublist on hover */
      position: inherit;
      padding: 10px 30px;
      left:100%;
      top:0;
      margin:0;
  }
  </code></pre>
  
  <p>Thanks. I'm not used to CSS codes...I'm Jurassic when it comes to CSS lol.</p>