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;
    }

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

1 个答案: