Submenu with fixed size

I'm trying to make a menu and sub menu, I want to make the submenu that appears for all the elements with fixed size. Something like that menu of this site: http://designscrazed.org/

<div id="menu">
<ul>
<li class="current-menu-item"> element 1
<ul>
<li> <a href="#">sub element 1.2</a></li>
<li> sub element 2.2</li>
</ul>
</li>
<li> element 2
<ul>
<li> sub element 1.2</li>
<li> sub element 2.2</li>
</ul>
</li>
<li> element 3
<ul>
<li> sub element 1.3</li>
<li> sub element 2.3</li>
</ul>
</li>
 <li> element 4
 <ul>
 <li> sub element 1.4</li>
 <li> sub element 2.4</li>
 </ul>
 </li>
 <li> element 5
 <ul>
 <li> sub element 1.5</li>
 <li> sub element 2.5</li>
 </ul>
</li>
<li> element 6
<ul>
<li> sub element 1.6</li>
 <li> sub element 2.6</li>
</ul>
</li>
 <li> element 7
 <ul>
<li> sub element 1.7</li>
<li> sub element 2.7</li>
</ul>
</li>

</ul>






</div>

and this is my CSS :

    #menu{
    background-color:magenta;
    float:right;
    width:auto;
    height:auto;
    /*display:inline-block;*/
    margin:10px 90px;
    padding: 0 0px;
    text-align:center;

    }

    #menu ul li{
    width:100px;
    height:20px;
    list-style:none;
    position:relative;
    top:0px; 
    float:left;
    margin:0 5px;
    padding:8px 0;
    cursor:pointer;




    }
#menu ul  li.current-menu-item
{

background:#ddd
} 

#menu ul li:hover{

background-color:#7F7F7F;

}

#menu ul ul{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
right: 50%;
margin-right: -85px;



}


#menu ul ul li{
float:none;
width:20em;
background-color:cyan;
margin:0px 0;


    }

#menu ul li:hover > ul{

display:block;  
left:auto;
right:0;
margin-right:-10px;

         }