CSS Submenu as Wide as Its Parent - css

Question

I am making a horizontal menu and sub menu (level 2) inside a wrapper. Please imagine this menu is on the top right of the page / wrapper. The problem is, since the sub menu is also horizontal it can (will) be too wide and will overflow outside the wrapper.
Here it is:
http://jsfiddle.net/5DWer/
There is "menu-wrapper" there, but it is not the wrapper I was referring above.
The wrapper is right after "Tab 3" so "Tab 3 sub 2" is outside the wrapper.
I think the solution is to have the second level menu to start at the same point below the first level so it will never flow outside the wrapper (assuming the first level is wide enough). In the fiddle link: "tab 3 sub 1" starts right below "tab 1". I can't just use margin-left or left because I don't know under which tab the sub menu will start.
Is this possible or is there other solution? If possible in pure CSS, but I'll take Javascript if it isn't.
Thanks in advance :)
Thanks for the explanation. Sorry, here is the code:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
</ul>
</ul>
</div>
and the CSS
.menu-wrapper {
width: 100%;
}
.menu {
max-width: 450px;
float: right;
}
.menu li a,
.menu li {
display: inline-block;
text-decoration: none;
}
.menu li:hover > ul {
display: block;
}
.menu li ul {
display: none;
width: 404px;
position: absolute;
}
.menu li li{
width: 200px;
margin: 0;
}
.menu li ul ul {
top: 100%;
left: 50%;
width: 200px;
}
.menu ul li:hover > ul {
border-left: 0;
display: block;
}
.menu li ul li a {
display: block;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}

Answer 1

here is the solution to your problem: (I added a 3rd subtab to show it works)
http://jsfiddle.net/5DWer/3/
However, like I mentioned in the fiddle as comment:
You have to manually specify the width of the second-level ul.
Also, you have to nest your second level properly, like this:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
</ul>
</li>
</ul>
</div>
and not outside the li.
For reference (jsfiddle code):
HTML:
<div class="menu-wrapper">
<ul class="menu">
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3
<ul>
<li>tab 3 sub 1</li>
<li>tab 3 sub 2</li>
<li>tab 3 sub 3</li>
</ul>
</li>
</ul>
</div>
And CSS:
.menu-wrapper {
width: 100%;
}
.menu {
max-width: 450px;
float: right;
}
.menu li {
display: inline-block;
text-decoration: none;
font-family: Arial, sans-serif;
background-color: yellow;
width: 50px;
height: 20px;
text-align: center;
}
.menu li ul {
display: none;
width: 500px; /* caveat : you have to specify the width manually */
margin-top: 10px;
}
.menu li:hover ul {
display: block;
float: right;
}
.menu li ul li {
float: right;
background-color: orange;
height: 100%;
}
.menu li ul li a {
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}

Answer 2

Looking at your code, it seems to be operating as expected. It seems to me, from what I can see (given the float:right for example) that this is more of a ui/design problem than a code problem. If not, maybe you can provide further details on your actual design so I can provide a css solution.