Centering Submenu - css

Question

I've read all the questions concerning centering submenus. But I don't get my problem solved.
I have a simple navigation bar with 2 submenus.
You can find it here: Fiddle.
ul#nav, ul#sub1, ul#sub2 {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul#sub1 a, ul#sub2 a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul#sub1, ul#sub2 {
display: none;
position: absolute;
left: 0px;
}
ul#nav li:hover ul#sub1 {
display: block;
}
ul#sub1 li:hover ul#sub2 {
display: block;
}
<nav>
<ul id="nav">
<li>Reisen
<ul id="sub1">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul id="sub2">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul id="sub1">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
I want the submenu centered. When I hover over "Reisen" the submenu gets the same width like the main menu.
When I hover over "Karriere", I want the submenu centered under "Karriere" and not positioned left under "Reisen".
I was thinking of a span-element to the button "Karriere" but I couldn't solve it.
Thanks for your help.

Answer 1

I don't really now if this is what you're looking for or not, but maybe something like this?
Note: I made a few changes to your CSS and HTML, mainly changing everything to use classes instead of IDs
JS Fiddle Example
HTML
<nav>
<ul id="nav">
<li>Reisen
<ul class="sub">
<li>Europa</li>
<li>Amerika</li>
<li>Asien
<ul class="sub-second">
<li>Thailand</li>
<li>Bhutan</li>
<li>China</li>
<li>Vietnam</li>
<li>Japan</li>
</ul>
</li>
<li>Afrika</li>
<li>Australien</li>
</ul>
</li>
<li>Magazin</li>
<li>Karriere
<ul class="sub">
<li>Thema 1</li>
<li>Thema 2</li>
<li>Thema 3</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
CSS
ul#nav, ul.sub {
list-style-type: none;
}
ul#nav {
position: relative;
}
ul#nav li {
width: 125px;
text-align: center;
float: left;
margin-right: 4px;
position: relative;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul.sub a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
color: #000;
}
ul.sub {
display: none;
position: absolute;
left: 0px;
padding-left: 0;
}
ul.sub-second {
display: none;
list-style: none;
left:100px;
top: 0;
position: absolute;
}
ul#nav li:hover ul.sub {
display: block;
}
ul#nav li:hover ul.sub li:hover ul.sub-second {
display:block;
}
}