为什么我的菜单栏在firefox中消失了?

时间:2014-06-23 09:44:32

标签: html css

请帮忙!这真让我抓狂。我的菜单栏在Chrome中显示正常但在Firefox或Cometbird等中没有显示...

我似乎无法找到问题,所以我把整个事情放在了下面。任何帮助将不胜感激,但请不要给自己带来不便。

HTML

<div class="content"> 
    <div class="header">

<a href="home.html"><img src="images/Index_01.jpg" width="255" height="113" alt=""></a>

<div class="LOGIN_1">
<a href="#">LOGIN</a>
</div>

<div class="buttons_1">  
<ul id="menu">
    <li><a href="home.html">HOME</a>&nbsp;
    <li><a href="services.html">PRODUCTS & SERVICES</a>&nbsp;
    <li><a href="solutions.html">SOLUTIONS</a>&nbsp;
    <ul class="sub-menu">
        <li><a href="#"><b>Solution List</b><hr></a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
    </ul>
    <li><a href="faq.html">FAQ</a>&nbsp;
    <li><a href="about us.html">ABOUT US</a>&nbsp;
    <li><a href="contact us.html">CONTACT US</a>&nbsp;
    </li>
    </ul>
    </li>
</ul>

</div>   

</div>



<div class="bodywrapperP">
<h1>Contact Information:</h1>
<p><b>E-mail:</b>&nbsp;<img src="images/email.png" width="95" height="12">-</p>
<p><b>Tel:</b>number</p>
<p><b>Address:</b>goes here</p>

&nbsp;

<form name="contactform" method="post" action="send_form_email.php">

<table width="940">
    <td align="center"><td><h1>E-mail us!</h1></td>
    </td>
 <tr>

 <td width="130" valign="top">
  <label for="first_name">First Name</label>
 </td>
 <td width="auto" valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>
 <tr>
 <td valign="top">
  <label for="last_name">Last Name</label>
 </td>
 <td valign="top">
 <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
 <label for="email">Email Address</label>
  </td>
 <td valign="top">
 <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
 <label for="comments">Comments</label>
 </td>
 <td valign="top">
 <textarea  name="comments" maxlength="1000" cols="97" rows="20"></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:right">
  <input type="submit" value="Submit">
 </td>
</tr>
</label>
</table>
</form>

</div>

<div class="footer2">
<a href="home.html">HOME</a> | <a href="services.html">PRODUCTS & SERVICES</a> | <a href="solutions.html">SOLUTIONS</a> | <a href="faq.html">FAQ</a> | <a href="about us.html">ABOUT US</a> | <a href="contact us.html">CONTACT US</a> |  <a href="#">MOBILE SITE</a> | <a href="#">LOGIN</a>

<br>
<a href="terms & conditions.html">TERMS & CONDITIONS</a> | <a href="privacy statement.html">PRIVACY STATEMENT</a>
</br>

</div>

</div>

CSS

.content {
    width:960px;
    height:auto; /*was 760px */
    margin: 0 auto;
    background-color:#EDEDED;
}

.header {
    background-color:#FFF;
    width:960px;
    height:114px;
}

.LOGIN_1 {
    float:right;
    background-color:#FFE600;
    width:135px;
    height:14px;
    padding:7px;
    margin-top:-90px;
    font-family:Verdana, Geneva, sans-serif;
}

.buttons_1 {
    clear:both;
    color:#5B5B5B;
    font-family:Verdana, Geneva, sans-serif;
    float:right;
    margin-top:-50px;
    margin-right:15px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  
}

/* drop down buttons */
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
    z-index:91;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #5B5B5B;
    padding: 5px;
    display:inline-block;

}
ul#menu li {
    position: relative;

}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    background:#FFF;
    margin-top:-5px;
    font-size:10px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

.bodywrapperP {
    clear:left;
    background-color:#FFF;
    width:920px;
    height:auto;
    margin-top:11px;
    padding:20px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#333;
}

.footer2 {
    background-color:#999999;
    width:960px;
    height:auto;
    font-family:Arial, Helvetica, sans-serif;
    color:#5B5B5B;
    font-size:14px;
    text-align:center;
    padding-top:12px;
    position: relative;
    bottom: -10px ;
    padding-bottom:12px;
}

由于

1 个答案:

答案 0 :(得分:0)

margin-top:-50px;

中删除.buttons_1

demo