Html 如何修复我的子菜单的对齐方式

我正在尝试完善一个导航栏，到目前为止唯一的错误是对齐方式是下拉菜单。是否可以在不重新执行所有代码的情况下，相对于它所在的td对其进行定位？如果没有，我将如何从菜单中调低子菜单

这是我的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>

ul.nav{
文字装饰：无；
显示：表格单元格；
填充：0px；
列表样式：；
}
ulli.nav{
浮动：左；
宽度：100%；
文本对齐：居中；
背景：透明；
文字装饰：无；
列表样式类型：无；
}
ul li.导航：悬停{
浮动：左；
宽度：100%；
文本对齐：居中；
背景色：透明；
文字装饰：无；
列表样式类型：无；
}
ul li.nav2{
浮动：左；
宽度：70%；
文本对齐：左对齐；
背景:#313131；
文字装饰：无；
列表样式类型：无；
}
ullia{
显示：块；
填充：0px 0px；
颜色：白色；
背景:#313131；
文字装饰：无；
}
ulli a.nav:悬停{
文本对齐：左对齐；
颜色：白色；
背景：透明；
}
ul li ul.nav{
宽度：25%；
显示：无；
}
ul li.导航：悬停ul{
浮动：中心；
不透明度：.87；
位置：绝对位置；
显示：块；/*显示下拉列表*/
}
导航：悬停{
背景色：#703f70；
颜色：#703f70；
}
a:链接{
颜色：白色；
背景色：透明；
}
a:悬停{
颜色：#5be5；
背景色：#703f70；
}
a、 琥珀：悬停{
颜色：；
背景色：透明；
}
输入{
字体：13.5pt arial；
颜色：#5be5；
边际：0px；
垫面：5px；
左侧填充：5px；
垫底：5px；
显示：；
背景：#703f70；
边框颜色：#b266b2；
字体大小：粗体；
}
输入：悬停{
颜色：#5be5；
背景：#b266b2；
边框颜色：#703f70；
}

这是我的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>

---

请不要用表格做布局……现在是80年代。@Paulie_D没问题。让我们使用divs。你可以看到我自己的测试，使用html和css。它可以在10行内完成，希望此链接对您有用@Cristian Rubini它确实解决了问题，但是否仍有保持文本中心对齐的方法？
ul.nav{文本装饰：无；显示：表格单元格；填充：0px；列表样式：；边距：0；浮动：左；文本对齐：中心；宽度：100%；}

确实是这样，不过现在家长的人数增加了。如果你想告诉我具体看什么来解决问题，那就好了。很抱歉打扰你，谢谢你的帮助。

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