title: How to display sub sub menu to the left side using CSS?
body: <p>I want to display the sub sub menu in the left side instead in the right side</p>
  
  <p>Here's the link: <a href="https://web.archive.org/web/20150828093625/https://www.homecredit.ph/testEnvironment/" rel="nofollow noreferrer">https://www.homecredit.ph/testEnvironment/</a></p>
  
  <p>Here's the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>/*-Main Menu-*/
  #site-navigation .menu &gt; ul &gt; li:hover &gt; a:before, #site-navigation .menu &gt; ul &gt; li.current_page_item &gt; a:before, #site-navigation .menu &gt; ul &gt; li.current-menu-item &gt; a:before, #site-navigation .menu &gt; ul &gt; li.current_page_ancestor &gt; a:before, #site-navigation .menu &gt; ul &gt; li.current-menu-ancestor &gt; a:before{ text-decoration: none; content: ""; height: 5px; left: 0; position: absolute; top: -5px; width: 100%; }
  .logo-center #site-navigation .menu &gt; ul &gt; li:hover &gt; a:before, .logo-center #site-navigation .menu &gt; ul &gt; li.current_page_item &gt; a:before, .logo-center #site-navigation .menu &gt; ul &gt; li.current_page_ancestor &gt; a:before, .logo-center #site-navigation .menu &gt; ul &gt; li.current-menu-ancestor &gt; a:before{ display: none; }
  #site-navigation .menu ul ul{ background: none repeat scroll 0 0 #FFF; border-bottom: 2px solid #d31716; border-top: 2px solid #d31716; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); display: none; left: 0; position: absolute; top: 100%; transition: all 0.3s ease-in-out 0s; z-index: 99999; font-family: 'Open Sans Bold', sans-serif; }
  #site-navigation .menu li:hover &gt; ul{ display: block; }
  #site-navigation .menu ul ul li{ border-bottom: 2px solid #DDD; display: block; font-size: 13px; line-height: 20px; margin: 0 !important; text-align: left; }
  #site-navigation .menu ul ul li:last-child{ border-bottom: none; }
  #site-navigation .menu ul ul li a{ color: #666; display: block; font-weight: 300; min-width: 140px; padding: 10px 15px; position: relative; text-decoration: none; }
  #site-navigation .menu ul ul li &gt; a:hover:before, #site-navigation .menu ul ul li.current_page_item &gt; a:before{ background: #F0563D; content: ""; height: 2px; left: 0; position: absolute; top: -2px; width: 100%; }
  #site-navigation .menu ul ul li &gt; a:hover, #site-navigation .menu ul ul li.current_page_item &gt; a{ color: #d31716; }
  #site-navigation .menu ul ul ul{ top: -2px; left: 100%; }
  
  /*-With Sub pages-*/
  #site-navigation .menu &gt; ul &gt; li.menu-item-has-children &gt; a:before{ color: #FFF; content: '\f107'; font-family: FontAwesome; font-size: 10px; vertical-align: 1px; }
  #site-navigation .menu &gt; ul &gt; li.menu-item-has-children &gt; a::after{ content: '\f107'; font-family: FontAwesome; font-size: 14px; margin-left: 7px; vertical-align: 1px; }
  #site-navigation .menu &gt; ul &gt; li &gt; ul &gt; li.menu-item-has-children &gt; a::after{ color: rgb(34, 34, 34); content: '\f105'; font-family: FontAwesome; font-size: 10px; vertical-align: 1px; float: right; }
  </code></pre>