Q:

How to fix the alignment of my sub-menu

I'm trying to perfect a navigation bar and so far the only thing wrong is the alignment is the drop down menu.  Is there anyway to position it relative to the td it is in without re-doing all of my code?  If not how would I go about lowering the sub-menu from the menu. 
Here is my CSS
        ul.nav{
    text-decoration: none;
    display: table-cell;
        padding: 0px;
        list-style: ;

    }

    ul li.nav{
    float: left;
        width: 100%;
        text-align: center;
    background:transparent;
    text-decoration: none;
    list-style-type: none;
     }

     ul li.nav:hover{
    float: left;
        width: 100%;
        text-align: center;
    background-color:transparent;
    text-decoration: none;
    list-style-type: none;
     }

    ul li.nav2{
    float: left;
        width: 70%;
        text-align: left;
    background:#313131;
    text-decoration: none;
    list-style-type: none;

     }

    ul li a{

        display: block;
        padding: 0px 0px;
    color: white;
        background:#313131;
        text-decoration: none ;

    }
    ul li a.nav:hover{

    text-align: left;
        color: white;
        background:transparent;

    }
    ul li ul.nav{

    width: 25%;
    display: none ;

    }
    ul li.nav:hover ul{
    float: center;
    opacity: .87;
    position: absolute;
        display: block; /* display the dropdown */

    }

    td.nav:hover{
    background-color:#703f70;
    color: #703f70;
    }

    a:link {
        color: white;
        background-color: transparent;
    }

    a:hover {

        color: #5be5e5 ;
        background-color: #703f70;
    }

    a.amber:hover {
    color: ;
        background-color: transparent ;
    }

input { 
font: 13.5pt arial; 
color: #5be5e5; 
margin: 0px; 
padding-top: 5px; 
padding-left: 5px;
padding-bottom: 5px;
display: ; 
background: #703f70; 
border-color: #b266b2;
font-weight:bold;
}

input:hover {
color: #5be5e5;
background: #b266b2;
border-color: #703f70;
}

</style>

Here is my HTML
<table width="95%"   align="center" valign="bottom"
<tr>

<td width="11%" bgcolor="#313131">
</td>

<td class="nav" bordercolor="#313131" bgcolor="#313131" align="center" valign="bottom" width="12.25%">
<ul class="nav"><li class="nav">
<a href="homepage.html"><font size="3"><b>
<img src="graphics/homeicon1.png" width="25" height="25">
<br>
Home Page
</b></font></a>
</li></ul>
</td>   

<td class="nav" bordercolor="#313131" bgcolor="#313131" align="center" valign="bottom" height="1" width="12.25%">
<ul class="nav">
<li class="nav"><a href="contentpage.html"> <img src="graphics/contenticon1.PNG" width="20" height="25"> <br> <font size="3"><b> <img src="graphics/dropdownarrowlefticon1.PNG" width="10" height="10"> Content Page <img src="graphics/dropdownarrowrighticon1.PNG" width="10" height="10"> </b></font> </a>
    <ul class="nav">
    <li class="nav2"><a href="interactivewebsitespage.html"><font size="5"><b> <img src="graphics/interactiveicon1.png" width="20" height="20"> Interactive </b></font></a></li>
    <li class="nav2"><a href="noninteractivewebsitespage.html"><font size="5"><b> <img src="graphics/noninteractiveicon1.png" width="20" height="20"> Noninteractive </b></font></a></li>
    <li class="nav2"><a href="videogamespage.html"><font size="5"><b> <img src="graphics/videogamesicon1.png" width="20" height="15"> Video Games</b></font></a></li>
    <li class="nav2"><a href="youtubevideospage.html"><font size="5"><b> <img src="graphics/youtubevideosicon1.png" width="20" height="20"> Youtube Videos</b></font></a></li>
</li class="nav">             
</ul class="nav">
</td>        

<td class="nav" bordercolor="#313131" bgcolor="#313131" align="center" valign="bottom" width="12.25%">
<ul class="nav">
<li class="nav">
<a href="infopage.html"><font size="3"><b> 
<img src="graphics/infoicon1.PNG" width="25" height="25"> 
<br> 
Info Page 
</b></font></a>          
</li></ul>
</td>

<td class="nav" bordercolor="#313131" bgcolor="#313131" align="center"valign="bottom" width="12.25%">   
<ul class="nav"><li class="nav">
<a href="pollpage.html"><font size="3"><b>
<img src="graphics/pollicon1.PNG" width="25" height="25">
<br>
Poll Page
</li></ul>
</b></font></a></li>
</td>

<td width="11%" bgcolor="#313131">
</td>

</tr>
</table>

Here is a live example
http://jsfiddle.net/B7a5f/
The live example is a little messed up of course but for the most part the concern is that its position is too far to the right and higher up than I like it. 

A:

   ul.nav{
    text-decoration: none;
    display: table-cell;
        padding: 0px;
        margin:0;
        float:left;
    }

