how to center submenu under the parent `<li>`

Question

I'm building a menu where there is a second level, this level is show under the parent <li> as a new horizontal line/menu. Right know when the second level is visible it start where the parent starts, so the first item og the submenu is directly under the parent <li>. I want the submenu to be XX px to the left so that the center of the submenu is under the center of the parent <li>. I'm not shure how to achieve this? So any suggestions is welcome, css or jquery, both are fine.

My menu structure:

<nav role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                MENU
            </button>
            <a class="navbar-brand" href="/"><img src='logo.png' class='logo'></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <div>
            <ul class="nav navbar-nav">
              <li><a href="#">Om rbs</a></li>
              <li><a href="#">Gratis</a></li>
              <li><a href="#">Kurser</a>
                <ul class="nav navbar-nav">
                  <li><a href="#">Foredrag</a></li>
                  <li><a href="#">Workshops</a></li>
                  <li><a href="#">Proces med konsulent</a></li>
                </ul>
              </li>
              <li><a href="#">Bliv Certifikeret</a></li>
              <li><a href="#">Workshops</a></li>
              <li><a href="#">Shop</a></li>
              <li><a href="#">Kontakt</a></li>
              <li><a href="#">Login</a></li>
            </ul>
          </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

And the CSS

nav a {
    font-size: 16px;
    font-family: 'Open Sans Condensed', 'Open Sans', Helvetica, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
}

nav > div div > div > ul.nav {
    position: relative;
    right: 0;
    float: right;
    z-index: 6;
}

nav > div div > div > ul.nav > li {
    position: relative;
    float: left;
    border-right: solid 1px rgba(255, 255, 255, 0.4);
}

nav > div div > div > ul.nav > li::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -6px;
    display: none;
    content: '';
    width: 12px;
    height: 12px;
    background-color: #fff;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

nav > div div > div > ul.nav > li > a:hover {
    color: #fff;
    background-color: #3e3e3e;
}

nav > div div > div > ul.nav > li:hover > ul.nav {
    display: block;
}

nav > div div > div > ul.nav > li:hover::after {
    display: block;
}

nav > div div > div > ul.navi:first-child {
    border-left: solid 1px rgba(255, 255, 255, 0.4);
}

nav > div div > div > ul.nav > li > ul.nav {
    position: absolute;
    padding: 0;
    top: 100%;
    left: 0;
    list-style: none;
    display: none;
    white-space: nowrap;
    z-index: 7;
}

nav > div div > div > ul.nav > li > ul.nav > li {
    position: relative;
    display: inline-block;
    float: none; 
}

nav > div div > div > ul.nav > li > ul.nav > li::after {
    content: '/';
    position: absolute;
    top: 4px;
    left: 100%;
}

nav > div div > div > ul.nav > li > ul.nav > li:last-child::after {
    content: '';
}

nav > div div > div > ul.nav > li > ul.nav > li > a {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #7c7c7c;
    padding: 4px 15px;
}

nav > div div > div > ul.nav > li > ul.nav > li > a:hover {
    color: #000;
    background-color: transparent;
}

And a codepen of the problem

Answer 1

try adding this to your existing css rule:

nav > div div > div > ul.nav > li:hover > ul.nav {
    display: block;
    -webkit-transform: translate(-50%, 0);
    left: 50%;
}

updated codepen