如何在父项下居中下拉菜单？

Question

我正在尝试使几乎所有宽度都与使用百分比相关，以便它更适应不同的分辨率，但我的下拉菜单有问题。下拉菜单不以父项为中心，我希望下拉菜单位于父项的正下方，并且不比父项更宽。

这是我的下拉菜单

ul.news{

display: table-cell;
    padding: 0px;
    list-style: ;
}

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

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


ul li a.news{

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

}
ul li a.news:hover{

text-align: center;
    color: white;
    background:#703f70;

}
ul li ul.news{

width: 32%;
display: none ;

}
ul li.news:hover ul{

float: center;
opacity: .87;
position: absolute;
    display: block; /* display the dropdown */

}

这是html

    <table border="1" width="99%" align="center" bordercolor="#181818" bgcolor="#181818">
<tr>

<td align="center" width="32%" bordercolor="#313131" bgcolor="#313131">
<font size="5" color="#5be5e5">
<b>
    <ul class="news"> 
        <li class="news">5/19/2014
</font>
<br>
<font size="3">
(Hover Over)
</font>
<br>
    <ul class="news">
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Added an arrow pointing down grapic by the Content Page item on the navigation bar to show it has drop-down content.</li>
            <br> 
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Added a Credit Archive.</li> 
            <br>
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Added more of my own grapics. Some parts of the images were grabbed from websites and credit has been given on the Info Page in the Credit Archive.</li>
            <br>  
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Have a great time!</li> 
        </ul>
</li> 
</font>
</td>

<td width="1%">
</td>

<td align="center" width="32%" bordercolor="#313131" bgcolor="#313131">
<font size="5" color="#5be5e5">
<b>
    <ul class="news"> 
        <li class="news">5/18/2014
</font>
<br>
<font size="3">
(Hover Over)
</font>
<br>
    <ul class="news">
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Replaced some of the placeholders with my own images.</li>
            <br> 
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Edited the News Bulletin slightly.</li> 
            <br> 
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Edited Eeveeislegendary a little.</li> 
        </ul>
</li> 
</font>
</td>

<td width="1%">
</td>

<td align="center" width="32%" bordercolor="#313131" bgcolor="#313131">
<font size="5" color="#5be5e5">
<b>
    <ul class="news"> 
        <li class="news">5/16/2014
</font>
<br>
<font size="3">
(Hover Over)
</font>
<br>
    <ul class="news">
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Added Images! The images you see are only placeholders and will be replaced soon.</li>
            <br> 
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Even more colors!</li> 
            <br>
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Added a small pointless website I made called "Eevee Is Best Legendary".</li>
            <br>
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Edited the navigation bar.
            <br>
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Changed About Page to Info Page.
            <br>
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Moved content from Contact Page and Archive Page to Info Page.
            <br>
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Edited the News Bulletin.
            <br>
        <li class="news2"><font size="5" color="#b266b2">-</font> <font size="5"> Edited the Random Button and the buttons for the poll.
        </ul>
</li> 
</font>
</td>

</tr>
</table>

这是一个活生生的例子。

http://jsfiddle.net/yU9tp/

Answer 1

首先从您的td 标签中删除align:center，这是这里的主要问题。然后根据需要调整边框和填充/等。