<ul id="dropdown2">
   <li>
     <a href="#">AL East     </a>
     <ul>
       <li>
         <a href="#">Baltimore         </a>
       </li>
       <li>
         <a href="#">Boston         </a>
       </li>
       <li>
         <a href="#">New York         </a>
       </li>
       <li>
         <a href="#">Toronto         </a>
       </li>
       <li>
         <a href="#">Tampa Bay         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL Central     </a>
     <ul>
       <li>
         <a href="#">Chicago         </a>
       </li>
       <li>
         <a href="#">Cleveland         </a>
       </li>
       <li>
         <a href="#">Detroit         </a>
       </li>
       <li>
         <a href="#">Kansas City         </a>
       </li>
       <li>
         <a href="#">Minnesota         </a>
       </li>     </ul>
   </li>
   <li>
     <a href="#">AL West     </a>
     <ul>
       <li>
         <a href="#">Houston         </a>
       </li>
       <li>
         <a href="#">Los Angeles         </a>
       </li>
       <li>
         <a href="#">Oakland         </a>
       </li>
       <li>
         <a href="#">Texas         </a>
       </li>
       <li>
         <a href="#">Seattle         </a>
       </li>     </ul>
   </li> </ul>

In style element (<style>) within head element:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
li {
  float: left;
  position: relative;
  width: 10em;
  }
li ul {
  display: none;
  top: 1.7em;
  left: 0;
}
li > ul {
  top: auto;
  left: auto;
}
li:hover ul { display: block; }
#dropdown2  li {
  border: thin solid navy;
  font-family: calibri,verdana,tahoma,helvetica,sans-serif;
  background-color: #ccf;
  }
#dropdown2 ul li { background-color: #eef; }
#dropdown2 a {display:block; padding: 0.25em;}
#dropdown2 a:link,
#dropdown2 a:visited,
#dropdown2 a:hover,
#dropdown2 a:active
  { text-decoration: none; font-weight: bold; }
#dropdown2 a:hover { background-color: navy; color: #ccf; }