css drop down menu :: sub menu is appearing within main menu after hover

Question

i have written a css code for my drop down menu

PROBLEMS WITH MY DROP DOWN MENU ARE ::

1. when i hover on my main menu item(i.e. in the exapmle 2nd one "bbbbb") it displays the submenu...thats ok..but its appearing with in the main menu by increaing its height
2. the background of main menu becomes the background of sub menu too,obviously i dont want that
3. in main menu list items starts with lot of text-inedent,i dont want that
4. text are aligned right in submenu
5. i want content width for sub menu not more than that

MY HTML ::

<div class="menu">
 <ul>
   <li><a href="#">aaaaaaaaaa</a></li>
   <li><a href="#">bbbbbbbbbb</a>
      <ul>
         <li><a href="#">aaaaaaaaaa</a></li>
         <li><a href="#">bbbbbbbbbb</a></li>
      </ul>
   </li>
  </ul>
</div>

my css::

.menu{
   width:70%;
   overflow:hidden;
   background:green;
   position:relative;
 }
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;}
.menu ul li:hover ul li{ float:none;}

and please explain my mistake

HERE IS MY FIDDLE

Answer 1

is this what you want?

http://jsfiddle.net/vcMtv/2/

.menu{
width:70%;
overflow:hidden;
background:green;
position:relative;
 }
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;}
.menu ul li:hover ul li{ float:none;}

Answer 2

You have to make some changes in the code.
Fiddle css

.menu{
 width:70%;
 background:green;
 position:relative;
 }
.menu ul{list-style:none;}
.menu ul li{ margin-left:20px;position:relative; float:left}
.menu ul ul{display:none;}
.menu ul li:hover ul{display:block; background:black;
position: absolute; margin: -2px 0 0 0; z-index: 11110;}
.menu ul li:hover ul li{ float:none; height:20px; }

Updated Fiddle
Changes:
display: inline-block; occupies the combined width of the inner container.
position:relative; using it in menu will cause increase in the height of the outer container.
you can read it at w3school