title: How to center child ul element with fluid width, relatively to the parent of the smaller size?
body: <p>I am doing horizontal navigation with css only.</p>
  
  <p>I can’t position first submenu to the middle of it’s parent of the smaller width.</p>
  
  <p>I'm not using display: because I need transitions. Also first submenu's min-width must be the same of it's parent.</p>
  
  <p>Thanks in advance!</p>
  
  <p>Here's <a href="http://codepen.io/Molinator/pen/wBrbp" rel="nofollow">a codepen link</a>!</p>
  
  <p>It needs to be like this <a href="http://i.stack.imgur.com/G4sUV.jpg" rel="nofollow">http://i.stack.imgur.com/G4sUV.jpg</a></p>
  
  <p>CSS</p>
  
  <pre><code>    nav {
      position:relative;
      border: 1px solid #222;
      background-image: linear-gradient(#444, #111);
      border-radius: 6px;
      box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
      height:40px;
      margin:50px auto;
      padding:0;
      width:90%;
      z-index:10;
  }
  nav ul,
  nav ul ul {
      list-style:none;
      padding:0;
      margin:0;
  }
  nav&gt;ul {    
      clear:left;
      display:flex;
      justify-content:center;
      align-content: stretch;
      text-align:center;
      font:12px Arial, Helvetica, sans-serif;
      text-transform:uppercase;    
  }
  nav ul li {
      border-right: 1px solid #222;
      box-shadow: 1px 0 0 #444;
      height:40px;
      padding:0;
      margin:0;
      position: relative;
      text-align: center;  
  }
  nav ul li:last-child {
      border:none;
      box-shadow:none
  }    
  nav ul li a {
      display:block;
      text-align: center;
      color: #ccc;
      text-decoration: none;
      padding:13px 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  nav ul li a:hover {
      background-image: linear-gradient(#04acec, #0186ba);
      color: #fafafa
  }
  nav ul li ul {
      background: linear-gradient(#444, #111);        
      border-radius: 3px;
      transition: all 1s ease-in-out;
      text-transform:none;
      opacity: 0;
      visibility: hidden;
      font-size: 12px;
  }
  nav ul li:hover&gt;ul {
      opacity: 1;
      visibility: visible;
      margin: 0;
      width:auto;
  }
  nav ul li&gt;ul {
      position: absolute;
      min-width: 100%;
  
  }
  nav ul li ul li ul {
      min-width: 0px;
  }
  nav ul li ul li {
      border:none;
      box-shadow: 0 1px 0 #111, 0 2px 0 #666;
      float:none;
      margin:0;
  }
  nav ul li ul li:last-child {
      box-shadow: none;
  }
  nav ul li ul li a {
    padding:10px 8px;
    border:none
  }
  nav ul li ul li ul {
      left: 90%;
      right: auto;
      top: 10%;
      margin: 0% 0 0 20%;
      box-shadow: -1px 0 0 rgba(255,255,255,.3);
      z-index:20;
  }
  nav ul li:last-child ul li ul {
      left: auto;
      right: 90%;
      margin: 0 20% 0 0%;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav class ="topusermenu"&gt;
    &lt;ul class="first"&gt;
      &lt;li&gt;&lt;a href=#&gt;Home Veryyyyy LOOOOONNNNGGGGGGG Home Veryyyyy LOOOOONNNNGGGGGGG&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=#&gt;Home 1Sub 1&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href=#&gt;Home 2Sub 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=#&gt;Home 2Sub 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=#&gt;Home 2Sub 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=#&gt;Home 1Sub 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=#&gt;Home 1Sub 3&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href=#&gt;Home 2Sub 1&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;News Very LONG&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=#&gt;News 1Sub 1 Very very bvery Long&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=#&gt;News 1Sub 2&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href=#&gt;News 2Sub 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=#&gt;News 2Sub 2 long&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href=#&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=#&gt;2&lt;/a&gt;
                    &lt;ul&gt;
                      &lt;li&gt;&lt;a href=#&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=#&gt;22&lt;/a&gt;
                        &lt;ul&gt;
                          &lt;li&gt;&lt;a href=#&gt;1333&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=#&gt;2333&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=#&gt;3333&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href=#&gt;333&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=#&gt;3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=#&gt;News 2Sub 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=#&gt;News 1Sub 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=#&gt;Contact&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=#&gt;Contact1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=#&gt;Contact2 long&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=#&gt;Contact3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=#&gt;About Lonoooooo o o o o&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=#&gt;About1 Very Long&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=#&gt;About2 Long&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href=#&gt;subAbout2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=#&gt;subAbout2&lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href=#&gt;subAbout2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=#&gt;subAbout2&lt;/a&gt;
                    &lt;ul&gt;
                      &lt;li&gt;&lt;a href=#&gt;subAbout2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=#&gt;subAbout2&lt;/a&gt;
                        &lt;ul&gt;
                          &lt;li&gt;&lt;a href=#&gt;22&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=#&gt;22&lt;/a&gt;
  
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href=#&gt;s22&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href=#&gt;subAbout2&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=#&gt;subAbout2&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=#&gt;2&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=#&gt;About3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;  
  </code></pre>