Question

我在下拉菜单上工作时遇到了一些麻烦。翻转菜单时，“下拉”菜单会打开，但会移动主菜单的内容，将其推开。我有一些我想念的东西，这让我疯狂地试图解决这个问题！请帮忙！

CSS：

ul#topnav {
list-style: none; 
float: right;
width: 978px; 
border: solid #blue 1px;
}

ul#topnav li {
float: right;
display: inline;
}

ul#topnav li a {
float: right;
height: 20px;
padding: 0 15px;
font-family: GillSansStd-light, Arial, Helvetica, sans-serif;
color: #fff;
font-size: 13px;
text-decoration: none; 
text-transform: uppercase;
}

ul#topnav li a:hover {
background: #;
color: #ef5a53;
position: relative;
}   

ul#topnav li a:active, ul#topnav li a.current {
color: #000;
}

ul#topnav li span {
display:none;
color:#ef5a53;
}

ul#topnav li span a { 
width: 70px;
height: 10px;
padding: 5px 6px 5px;
background: #ef5a53;
font-family: GillSansStd-LightItalic, Arial, Helvetica, sans-serif;
font-color: #FFFFFF;
font-size:8pt;
}

ul#topnav li span a:hover {
text-decoration: none; 
}

HTML：

<ul id="topnav">
    <li class="tab1"><a href="page1.html">TAB1</a></li>
    <li class="tab2"><a href="page2.html">TAB2</a></li>
    <li class="tab3"><a href="page3.html">TAB3</a></li>
    <li class="tab4"><a href="page4.html">OUR CLIENTS</a></li>
    <li class="tab5"><a href="#">OUR WORK</a>
        <span>
        <table width="144" height="24" border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td width="58"><a href="page1.html"><img src="images/image1.png" width="58" height="24"></a></td>
        <td width="86"><a href="page2.html"><img src="images/image2.png" width="86" height="24"></a></td>
        </tr>
        </table>
        </span>
    </li>
    <li class="tab6"><a href="page6.html">TALK TO US</a></li>

Answer 1

您可以尝试使下拉列表的z-index高于主页面的z-index，或使用绝对定位。

Answer 2

也许你应该在你的网站上考虑这样的下拉式CSS？

http://www.cssplay.co.uk/menus/final_drop2.html

亚导航问题

2 个答案: