所以我的网站有一些问题，特别是 CSS。我对网页设计相当陌生，所以这些东西不断出现。一般来说，我自己很容易弄清楚，但这真的让我很难过。
基本上发生的事情是无序列表中的最后两个元素由于某种原因被向下移动（下图）。根本想不通。我能找到的唯一解决方案是添加一个类并自己手动移动它。
同样，IE 9.0 也会出现问题，但前提是我启用了 javascript（我需要为我的子菜单项执行此操作）。
任何关于正在发生的事情的见解（并且手指交叉有一个简单的解决方案）将是惊人的。
<div id="main_menu">
<div id="main_menu_container">
<ul>
<li><a href=# id="home_button">Home</a></li>
<li><a href=# id="products_button">Products</a></li>
<li class="baq"><a href=# id="baq_button">Book a Quote</a></li>
<li><a href=#>Gallery</a></li>
<li class="misplace"><a href=#>About Us</a></li>
<li class="misplace"><a href=#>Contact Us</a></li>
</ul>
</div>
</div> <!--END OF MAIN MENU -->
和CSS...
div#main_menu{
height:45px;
position:relative;
z-index:11;
background: rgb(246,246,246);
background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(225,225,225,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(225,225,225,1)));
background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%);
background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%);
background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%);
background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e1e1e1',GradientType=0 );
-webkit-box-shadow: inset 0px -1px 0px 1px rgba(255, 255, 255, .2);
box-shadow: inset 0px -1px 0px 1px rgba(255, 255, 255, .2);
}
div#shadow_1{
position:relative;
background:url('images/shadow_grad.png') repeat-x;
height:6px;
z-index:20;
}
div#main_menu div#main_menu_container{
width:920px;
height:45px;
margin:0 auto;
}
#main_menu #main_menu_container ul li{
position:relative;
float:left;
list-style:none;
width:150px;
height:45px;
line-height:45px;
text-align: center;
margin:0px 0px;
padding:0px 0px;
z-index:21;
font-family: 'Roboto Condensed', sans-serif;
font-size:16px;
font-weight: 700;
color:#747474;
text-transform: uppercase;
}
#main_menu #main_menu_container ul li a{
display:block;
color:#747474;
transition:all .05s linear;
-o-transition:all .05s linear;
-moz-transition:all .05s linear;
-webkit-transition:all .05s linear;
}
#main_menu #main_menu_container ul li.baq a{background:#3d9dff; color:white;}
#main_menu #main_menu_container ul li a:hover{
/*background:#ffab00;*/
background:#ffab00; /*#3d9dff*/
color:white;
}
li.misplace{position:relative; top:-18px;}
jQUERY 代码（实际上并不知道 jquery，所以我已经让其他人这样做了。这意味着任何建议都可能超出我的头脑：/）：
$(document).ready(function(){
$("#products_button").mouseenter(function(){
$(".products").addClass("active_products");
$(".products_container").addClass("active_products_container");
});
});
$(document).ready(function(){
$(".products").mouseenter(function(){
$(".products").addClass("active_products");
$(".products_container").addClass("active_products_container");
});
});
$(document).ready(function(){
$(".products").mouseleave(function(){
$(".products").removeClass("active_products");
$(".products_container").removeClass("active_products_container");
});
});
$(document).ready(function(){
$("#home_button, #baq_button, #header").mouseenter(function(){
$(".products").removeClass("active_products");
$(".products_container").removeClass("active_products_container");
});
});