title: Make sub-menu of sub-menu on right side rather than going down
body: <p>Hi I made menu with submenu with submenu. But it is going down rather than going right side. I am new to CSS. You can see demo <a href="https://jsfiddle.net/1boofepp/1/" rel="nofollow noreferrer"><strong>Here</strong></a> </p>
  
  <p>Please check and may I get some help to align sub-sub-menus to the right of sub-menu . ex: align 'DB' and 'OT' to the right side of 'INS'. </p>
  
  <p>note:I need to show 'DB' and 'OT' only when hover through menu 'ECC'. Now it is showing for all others.
  <div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menuborder {
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff #0000ff #ffffff #ffffff;
  }
  
  .mainmenu {
    height: 0px;
  }
  
  .mainmenu ul#nav {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  
  .mainmenu ul#nav li {
    display: inline-block;
  }
  
  .mainmenu ul#nav li a {
    color: #266696;
    display: block;
    margin: 0 -2px;
    padding: 2px 15px;
    text-transform: uppercase;
  }
  
  .mainmenu ul#nav li:hover&gt;a {
    background: #11c3f1 none repeat scroll 0 0;
  }
  
  
  /*=================
  DropDown Menu
  ===================*/
  
  #nav&gt;li {
    position: relative;
  }
  
  #nav&gt;li:hover ul {
    opacity: 1;
    z-index: 9999;
    top: 100%;
    visibility: visible;
  }
  
  #nav&gt;li ul {
    background: #fff none repeat scroll 0 0;
    opacity: 0;
    left: -2px;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: left;
    transition: all 0.5s ease 0s;
    width: 204px;
    padding-left: 2px;
    z-index: -99999;
    top: 150%;
    visibility: hidden
  }
  
  #nav&gt;li ul li {
    display: block;
    width: 200px;
  }
  
  .mainmenu ul#nav li ul li a:hover {
    color: #fff;
    border-radius: 0 0 80px 0;
    border-left: 4px solid #000;
    padding-left: 10px;
  }
  
  .mainmenu ul#nav li ul li a {
    border-bottom: 1px solid #ddd;
    color: #000;
    padding: 10px 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-5 col-lg-5"&gt;
    &lt;div class="mainmenu nav"&gt;
      &lt;ul id="nav"&gt;
        &lt;li class="menuborder"&gt;&lt;a href="#"&gt;Ins&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Ecc&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;DB&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Ot&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Edu&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Emp&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Med&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Med&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Pr&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Re&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Soc&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="menuborder"&gt;&lt;a href="#"&gt;Assoc&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Pi&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Co&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Com&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Fo&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Mo&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Org&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;K&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="menuborder"&gt;&lt;a href="#"&gt;Cong&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Rel&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Wel&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
  
        &lt;li&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>