Question

I’m having some trouble getting my drop down menu to work. When you rollover the menu the ‘drop-down’ menu opens but it moves the content of the main menu, pushing it out of the way. Id there something I’m missing, this is driving me crazy trying to solve this! Please help!

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

You could try and make the z-index of the dropdown higher than that of the main page, or use absolute positioning.