CSS Submenu item bound position to menus parent element size - html

Question

I created a CSS menu which has menu items and submenu items. These submenu items are actually big divs which gets shown when the user hovers the menu item.
They work pretty well but I have one problem:
If the submenu is wider than the whole menu, it overflows and may break the pages width in the worst case.
When the submenu reaches the right side of the menu, it should "stick" at right:0px.
Is there any possibility to limit the position of an element to it's grandparental's width? Resp. is there a way to achieve my goal in pure CSS? I don't really want to use JavaScript for that.
This is the HTML structure and an excerpt of the important CSS:
.navi {
height:60px;
width:350px;
position:relative;
background-color:#DEDEDE;
}
.navi ul {
list-style:none;
display:inline-block;
margin-left:50px;
}
.navi ul li {
float:left;
height:60px;
cursor:pointer;
position:relative;
}
.navi ul li a {
height:100%;
line-height:60px;
display:inline-block;
}
.navi ul li:hover .submenu {
display:block;
}
.navi ul li .submenu {
width:200px;
height:100px;
display:none;
position:absolute;
background-color:#F3F3F3;
}
<div class="navi">
<ul>
<li>
<a>a navigation link</a>
</li>
<li>
<a>a navigation link</a>
<div class="submenu">
<!-- content -->
</div>
<div class="arrow"></div>
</li>
<div class="clearfix"></div>
</ul>
</div>
Here is a fiddle showing my menu.