Increase drop-down menu width in CSS

Hi,

I have a horizontal navigation menu with drop-down menu, the navigation menu has the look of the folder tab.  However, the drop-down menu has the same width with folder tab menu, how can I increase the width of drop-down menu.  Below is my code, thank you.

#navsite ul {
    width: 100%;
    float: left;
 padding: 0;
 margin-left: 0;
 /*border-bottom: 1px solid #778; */
 margin-bottom: -2px;
 margin-top:-1px;
 font:normal 12px Verdana, sans-serif;
 text-align:center;
}
#navsite ul li {
 list-style: none;
 margin: 0;
 float: left;
}
#navsite ul li a {
 padding: 5px 0.5em;
 margin-left: 2px;
 border: 0px solid #778;
 border-bottom: none;
 border-right:1px solid black;
 border-left: 1px solid black;
 background-color: #003656;
 text-decoration: none;
 background-image:  url(../9780596155933/example_code/title-glass.png);
 background-position: 50%;
 background-repeat: repeat-x;
 display: block;
 width: 6em;
}
#navsite ul li a:link {
 color: white;
}
#navsite ul li a:visited {
 /*color: #667;*/
 color: white;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
 color: #FFFFF;
 background-color: #0066ff;  /*mouseover ul*/
 border-color: #227;
}
#navsite ul li a#current {
 background-color: white;
 border-bottom: 1px solid white;
color: #448;
margin-bottom: -1px;
}
#navsite ul li a#current:hover {
 background-image:  url(../9780596155933/example_code/title-glass.png);
 background-position: 50%;
 background-repeat: repeat-x;
}

/**************************  THIS IS THE DROP-DOWN MENU   */
#navsite ul li ul {
position: absolute;
 width: 7em;
 left: -999em;
 float: none;
 border-bottom: none;
}
 
   
#navsite ul li:hover ul {left: auto;}
#navsite ul li ul li a {
 background: #003656;
 border: 0px solid black;
 margin-top: 4px;
}

*************************
<div id="navsite">

 <ul>
  <li><a href="index.html">HOME</a></li>
  <li><a href="About.html">ABOUT</a></li>
  <li><a href="/archives/">ARCHIVES</a></li>
  <li><a href="/writing/">WRITING</a>
           <ul>
              <li><a href="/writing/releasing-css">Releasing CSS</a></li>
              <li><a href="/writing/css-cookbook">CSS Cookbook</a></li>
            </ul>
        
  </li>
  <li><a href="/speaking/">SPEAKING</a></li>
  <li><a href="/contact/">CONTACT</a></li>
 
   </ul>
</div>