I'm trying to learn CSS, stylesheerts and move away from tables and columns.
I have some code below that doesn't work. The 2 problems I have are:
1. how can you get variable widths for the submenus. Some of my menu items are a lot longer than the others
2. when you run the html, I can't click on the submenus. It is like its opaque and you can see the script below and doesn't allow you to click on the submenus.
Thanks for ANY help. This is pretty new to me.

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <head>
     <title>Lake Oconee Tennis Association</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <meta name="author" content="Marty Colton" />

<link rel="stylesheet" type="text/css" href="forum.css" />
  </head>
	
  <body style="background-color:#ffff66">
		<div id = "menu" style="z-index:9">
	  <ul>
			<li><a href="headlines.htm">Headlines</a>
				<ul>
			    <li><a href="leaguesignup.htm">
            LEAGUE SIGNUP: Click here to signup for ALL leagues.  
            </a>
					</li>	 
			    <li><a href="newregistration.htm">
            JOIN LOTA: Want to join a fun group? Please click here to join LOTA
            </a>
					</li>	 
			    <li><a href="newinfoupdate.htm">
            CONTACT INFO CHANGES: Changed your phone? New email? New address? Click here so LOTA can stay in touch.
            </a> 
					</li>	 
        </ul>
			</li>

			<li><a href="leagues.htm">LOTA Leagues</a>
        <ul>
					<li><a href="mixed.htm">Mixed Doubles League</a></li>
					<li><a href="ladies.htm">Ladies' Doubles League</a></li>
					<li><a href="singles.htm">Ladies' Singles League</a></li>
        </ul>
  		</li>
			<li><a href="lota-links.htm">LOTA Links</a>
        <ul>
				  <li><a href="passwd-protect/roster.pdf">Member Roster</a></li>
					<li><a href="directions.pdf">Directions to Courts</a></li>
      	  <li><a href="stringers.pdf">Certified Stringers</a></li>
          <li><a href="informal.htm">Informal Groups</a></li>
				</ul>
  		</li>
			<li><a href="all-about-lota.htm">All About LOTA</a>
        <ul>
          <li><a href="boardmembers.htm">Board Members</a></li>
          <li><a href="statistics.htm">Member Statistics</a></li>
          <li><a href="youth.htm">Youth Program</a></li>
          <li><a href="history.htm">Our History</a></li>
				</ul>
  		</li>
			<li><a href="tennis-links.htm">Tennis Links</a>
        <ul>
          <li><a href="http://tennislink.usta.com/leagues/">USTA Tennis Link</a></li>
          <li><a href="http://www.usta-sta.com/sub_membership_application.htm">Join USTA</a></li>
          <li><a href="http://www.tennisresortsonline.com">Tennis Resorts Online</a></li>
          <li><a href="ntrpcategories.htm">NTRP Categories</a></li>
				</ul>
  		</li>
			<li><a href="oconee-links.htm">Lake Oconee Links</a>
        <ul>
          <li><a href="http://www.greeneccoc.org">Greene County</a></li>
          <li><a href="http://www.madisonga.org">Morgan County</a></li>
    			<li><a href="http://www.eatonton.com">Putnam County</a></li>
          <li><a href="http://www.milledgevillega.com">Baldwin County</a></li>
				</ul>
  		</li>
    </ul>
		<br style="clear: left" /> 
    </div>
		
    <p style= "z-index: 0"> 
	  	Mission Statement: LOTA represents the Lake Oconee Area with members from Greene, Morgan, Putnam 
		  and Baldwin Counties. Our purpose and objective is to create, develop, maintain and promote tennis in 
		  our communities. Our goal is to provide tennis opportunities and programs, where we all have fun, play good 
		  matches, and benefit from physical activity out-of-doors.
    </p>
				
	</body>
</html>

[CSS]
#menu ul {
margin-left: -3em;
background-color: #ffff66;
font: bold 13px verdana;
}
#menu li {
list-style-type: none;
border: 1px black solid;;
width: 100pt;
height: 20px;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
background-color: #e5febc;
text-align: center;
float: left;
}
#menu a {
text-decoration: none;
color: black;
display: block;
}
#menu a:hover {
background-color: orange;
}
#menu li:hover > ul {
display: block;
margin-left: -2em;
margin-top: 5pt;
}
#menu li ul {
display: none;
}
[/CSS]