如何修復我的子菜單的對齊

Question

我想完善一個導航欄，到目前爲止唯一錯誤的是對齊是下拉菜單。有沒有辦法將它放在相對於它所在的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> 

這裏是我的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> 

這是一個活生生的例子

http://jsfiddle.net/B7a5f/

當然，這個例子有點混亂，但大多數情況下，我們擔心的是它的位置比我想象的要高得多。

Answer 1

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