I am trying to make a PURE CSS drop-line menu. By now I have droplines pretty much down, so I am hoping to add a new twist. I am trying to center the dropline to it's parent ( not the menu, itself mind you).

I attempted to achieve this by wrapping the sub menu in a div which has a width of 1px; and it's absolutely positioned to 50% of the container ( which is the parent LI).
Everything would work fine if I could only move the submenu UL leftwards by half its width. this is easy if I wanted to give it an absolute width... ( i did this in the example by using IDs).

My question is could this be done without knowing the width of the submenus?


CSS
.top_menu { padding: 0; background: gray; width:960px; margin:0 auto ; border-bottom: 1.5em solid black}
.top_menu:after{content:""; display: block; clear: both;}
.top_menu ul { list-style: none inside; margin: 0; padding: 0;float:right; position: relative }/*float hack for collapsing menu in IE*/
.top_menu li { margin: 0; float: left; padding: .5em; position: relative;}
.top_menu li div { padding-top: 0; position: absolute; width:1px; left:50%; top: 100%; display:none ; text-align: center; background: orange} /*submain*/
.top_menu li:hover div { display: block}
.top_menu a{text-decoration: none}
.top_menu ul li:hover{background: pink}
.top_menu .submain{background: yellow; font-size: 70%; float: left}
#rs .submain{ float:left ; margin-left:-4.75em}
#prt .submain{ width:17em; margin-left:-8.5em}


MARKUP
<div class="top_menu">
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a>
<div id="prt">
<ul class="submain">
<li><a href="#">submenu</a></li>
<li><a href="#">stuff</a></li>
<li><a href="#">sub</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">items</a></li>
</ul>
</div>
</li>
<li><a href="#">item</a>
<div id="rs">
<ul class="submain">
<li><a href="#">sub</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">items</a></li>
</ul>
</div>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div>