Dropdown Menu CSS Style

Question

Hi!
I am trying to create a dropdown menu in Dreamweaver. I have watched several tutorials and read many how-to guides and my html looks fine, but editing the style is really throwing me off. I am a beginner to Dreamweaver, so I am unsure of the properties I need to make this right.  The code below, when I hover over the first button the dropdown menu goes behind the other two buttons.  I need the dropmenu to go off to the side of the buttons and down.  If not that, I can align the buttons to go horizontal, so they aren't being covered. I hope that makes sense.
Thank you in advance!! 
-M
HTML
  <div class="dropdown" id="dropdown" style="text-align: left;">
<ul>
        <li><a href="#">Americas</a>
           <ul>
                   <li><a href="#">Connecticut</a></li>
                    <li><a href="#">Ohio</a></li>
                    <li><a href="#">Vermont</a></li>
                    <li><a href="#">California</a></li>
                    <li><a href="#">Canada</a></li>
                    <li><a href="#">Brazil</a></li>
           </ul>
        </li>
</ul>
  <ul>
       <li><a href="#">China</a>
             <ul>
                     <li><a href="#">China</a></li>
               </ul>
        </li>
</ul>
<ul>
        <li><a href="#">Europe</a>
            <ul>
               <li><a href="#">France</a></li>
               <li><a href="#">UK</a></li>
            </ul>
        </li>
</ul>
</div>
STYLE
#dropdown {
margin: 0;
width: 150px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
#dropdown ul {
margin: 0;
padding: 0;
line-height: 30px;
#dropdown li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
#dropdown ul li a {
text-align: center;
height: 30px;
width: 150px;
display: block;
color: #000;
text-decoration: none;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
background: #CCC;
#dropdown ul ul {
position:absolute;
visibility:hidden;
top:32px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  #dropdown ul li:hover ul {
visibility:visible;
position:absolute;
   #dropdown li:hover {
background: #7D92C6;
float: left;
    #dropdown ul li:hover ul li a:hover {
    color:#000;
    background:#7D92C6;
  #dropdown a:hover {  
  color:#000;
  background: #7D92C6;
.clearFloat {
    clear:both;
    margin:0;
    padding:0;

Answer 1

Are you doing this as an execise in learning or is it for a real website. I ask because if the latter why not just use a tested and proven commercial product and be done with it?  I have used the PVII (http://www.projectseven.com) products for years and can't recommend them highly enough.