Floating inside an absolute positioned div, placed inside a relative positioned element

I am creating a pure CSS cursor dropdown menu based on a very simple idea.

HTML:

<ul id="top">
  <li>
    <a href="#">Menu item 1</a></li>
  <li>
    <a href="#">This one has submenu</a>
    <div class="submenu">
      <ul>...</ul>
    <div>
  </li>
</ul>

      

        
        
        
      

    

CSS:

div.submenu { 
  display: none; 
  position: absolute;
}
ul#top > li:hover div.submenu { display:block; }

      

        
        
        
      

    

As far as I know, this is the minimum minimum for the idea to work. The problem is, I want the submenu to be multi-column without actually using multiple CSS3 columns.

So, I decided to split my submenu into multiple lists and have them float: left

like this:

<ul id="top">
  <li>
    <a href="#">Menu item 1</a></li>
  <li>
    <a href="#">This one has submenu</a>
    <div class="submenu">
      <ul>...</ul>
      <ul>...</ul>
      <ul>...</ul>
    <div>
  </li>
</ul>

      

        
        
        
      

    

... and CSS:

div.submenu ul { float:left; }

      

        
        
        
      

    

This worked until I got a rather large submenu in the last item of the main menu, creating a result like this:

The problem is that it is unacceptable for the submenu to extend outside the container . I decided to mark the second half of the main menu items like class="right"

and even out the right frame sub-menu with the right border of the parent element .

li.right div.submenu { right: 0; }
/* this placed the submenu to the right of the entire page;
it needs a positioning context: */

ul#top li { position:relative; }

      

        
        
        
      

    

This last line makes you <ul>

stop swimming and just stack on top of each other.

Is there a way to keep them floating without setting a <div class="submenu">

fixed width?

Interactive demo: http://codepen.io/oli-g-sk/pen/ociet

Edit: if it helps somehow, heallowed to set submenu list items .submenu > ul > li

to fixed width. In fact, I am already doing this in the demo.