CSS - Aligning <code> Element...

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
  <tr>
    <td width="230" height="85">
	<ul><li><a href="">HOME</a></li>
        <li><a href="">LINK TWO</a></li>
    </ul>
	</td>
  </tr>
  <tr><td></td></tr>
</table>

	<ul id="nav">

		<li id="main1" class="mainMenu"><a href="./index.php">Home</a></li>
		
		<li id="main2" class="mainMenu"><a href="./about.php">About Us</a></li>

		<li id="main3" class="mainMenu"><a href="./calendar.php">Calendar</a></li>

		<li id="main4" class="mainMenu"><a href="./college.php">College&nbsp;Students</a>
			<ul>
				<li><a href="./studentNews.php">News</a></li>
				<li><a href="./studentLeaders.php">Student Leaders</a></li>
				<li><a href="./sundaySupper.php">Sunday Supper</a></li>
				<li><a href="./serventEvents.php">Servant Events</a></li>
				<li><a href="./gallery2/main.php?g2_itemId=40">Fall Retreat</a></li>
			</ul>
		</li>
		
		<li id="main5" class="mainMenu"><a href="./family.php">Family&nbsp;Ministry</a>
			<ul>
				<li><a href="./family.php">Overview</a></li>
				<li><a href="./fmSchedule.php">Schedule</a></li>
				<li><a href="./fmActivities.php">Activities</a></li>
				<li><a href="./gallery2/main.php?g2_itemId=53">Photos</a></li>
				<li><a href="./fmYouCanHelp.php">You Can Help</a></li>
				<li><a href="./fmCoordination.php">Education Coordination Team</a></li>
			</ul>
		</li>
		
		<li id="main6" class="mainMenu"><a href="./serving.php">Ways&nbsp;to&nbsp;Serve</a></li>
		
		<li id="main7" class="mainMenu"><a href="./giving.php">Ways&nbsp;to&nbsp;Give</a>
			<ul>
				<li><a href="./giving.php">Financial Home</a></li>
				<li><a href="https://www.eservicepayments.com/cgi-bin/specialwebapp.vps?appid=40a27221f816144b21e9f2e0d81891b8a68820b814b79fc6caf83c6a4fcf06b22f288aa4a34f  a442a76b20a4eb1041b012267f0823e0ef99aeca1bf9c914f523">Make A Gift Online</a></li>
				<li><a href="./eft.php">Electronic Fund Transfer</a></li>
				<li><a href="./matching.php">Matching Gifts</a></li>
				<li><a href="./meijer.php">Meijer Community Rewards</a></li>
				<li><a href="./givingTools.php">Tools for Giving</a></li>
				<li><a href="./endowment.php">Endowment Fund</a></li>
			</ul>
		</li>
		
		<li id="main8" class="mainMenu"><a href="./contact.php">Contact Us</a></li>
		


	</ul>

#nav {
	float: left;
	list-style: none;
	line-height: 1;
	font-size: 16px;
	padding: 0;
	margin: 0 0 0.5em 0.6em;
}

#nav ul {
	list-style: none;
	background: #006600;
	padding: 0;
	border: 1px solid #000;
}

#nav li.sfhover ul {
	left: 1em;
}

#nav a {
	display: block;
	color: white;
	text-decoration: none;
	padding: 0.25em;
	padding-right:0;
}

#nav ul a {
	display: block;
	width: 6em;
	color: white;
	text-decoration: none;
	background:none;
	border:none;
}

#nav li {
	float: left;
	padding: 0;
	width: 7em;
	height:auto;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 13.9em;
	font-weight: normal;
	border: 1px solid #000;
}

#nav li li {
	padding-right: 1em;
	width: 13em;
}

#nav li ul a {
	width: 12em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav ul li:hover,  #nav li:hover, #nav ul li.sfhover, #nav li.sfhover {
	background: #009900;
}

/*  Width of the tabs */
#nav #main1 {
	width:3.4em;
}

#nav #main2 {
	width:4.6em;
}

#nav #main3 {
	width: 4.5em;
}

#nav #main4 {
	width:7.85em;
}

#nav #main5 {
	width:7em;
}

#nav #main6 {
	width:6.8em;
}

#nav #main7 {
	width:6.3em;
}

#nav #main8 {
	width:5.5em;
}

#nav li {
	margin-right: 3px;
	border: 1px solid #000;
	background: #006600;
	color: white;
	text-decoration:none;
}

#nav li ul li {
	border:none;
	background: #006600;
	color: white;
	text-decoration:none;
}

#nav li ul {
	border: 1px solid black;
}

#nav li:hover, #nav li.sfhover {
    position: static;
}