title: Horizontal alignment of CSS sub-submenu?
body: <p>I have created a nested menu with the ul/li tags and I would like to horizontally align the second and the third sub-submenu to the first submenu.</p>
  
  <p>Visually, I have this: <a href="http://i.imgur.com/vGtPtft.png" rel="nofollow">http://i.imgur.com/vGtPtft.png</a>
  and I want this: <a href="http://i.imgur.com/wcqw3TA.png" rel="nofollow">http://i.imgur.com/wcqw3TA.png</a></p>
  
  <p>CSS/HTML:</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> body {
    background-color: #000;
    font-size: 1.6vw;
    color: #FFF;
  }
  div#header {
    width: 65vw;
    margin-left: auto;
    margin-right: auto;
  }
  #nav {
    font-size: 1.4em;
    white-space: nowrap;
    position: absolute;
  }
  #nav ul {
    display: inline-table;
    list-style-type: none;
    margin: 0px;
    border-style: none;
    padding: 0px;
  }
  #nav ul li {
    display: table-cell;
  }
  #nav ul li a {
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 0px 5px;
    border-left-style: solid;
    border-left-width: 7px;
    border-color: #FFF;
    color: #FFF;
    text-decoration: none;
  }
  #nav ul li .active {
    color: #F00;
    border-left-color: #F00;
  }
  #nav ul li a:hover {
    color: #F00;
    border-color: #F00;
  }
  #nav ul li ul {
    position: absolute;
    display: none;
  }
  #nav ul li:hover ul {
    display: block;
    margin: 0px;
    padding: 5px 0px 0px;
  }
  #nav ul li:hover ul li ul {
    display: none;
  }
  #nav ul li:hover ul li:hover ul {
    display: block;
    margin: 0px;
    padding: 5px 0px 0px;
    font-size: 0.85em
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Home&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div id="header"&gt;
      &lt;div id="nav"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" class="active"&gt;Menu 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;
  
            &lt;ul&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Submenu 1&lt;/a&gt;
  
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 2&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
  
              &lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Submenu 2&lt;/a&gt;
  
                &lt;ul id="sub2"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 3&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 4&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 5&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 6&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 7&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
  
              &lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Submenu 3&lt;/a&gt;
  
                &lt;ul id="sub3"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 8&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 9&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Subsubmenu 10&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
  
              &lt;/li&gt;
  
            &lt;/ul&gt;
  
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 5&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu 6&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The only idea I came up with is to manually move the margin to the left by adding this:</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>#nav ul li:hover ul li:hover ul#sub2  {
   margin-left: -10.8vw
  }
  
  #nav ul li:hover ul li:hover ul#sub3 {
   margin-left: -21.5vw
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought that using "vw" as unit is a good idea because I have a 16:9 monitor (resolution: 1366x768) and I assumed it would scale on other 16:9 monitors but tests on other resolutions show that the sub-submenu's are either more to the left or still a bit to the right of the first submenu. Is it possible to handle this problem with minor modifications or would I have to rewrite the whole thing by using, for example fixed sizes in pixels ?</p>