Running into a bit of a snag with my website lately, specifically with the CSS. As I'm relatively new to web design, these issues tend to crop up more frequently. Usually, I can solve them on my own, but this one has me completely puzzled.
What's happening is that the last two elements in the unordered list are unexpectedly pushed down (see image below). I've tried various fixes, including adding a class and manually adjusting it, but nothing seems to work.
Additionally, I've noticed that the problem only occurs in IE 9.0 when JavaScript is enabled (which is necessary for my sub-menu items).
Any insights or suggestions on what might be causing this issue (and hopefully an easy solution) would be greatly appreciated.
<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 -->
Here's the CSS...
div#main_menu{
height:45px;
position:relative;
z-index:11;
/* background gradients and shadow styling */
}
div#shadow_1{
/* shadow styling */
}
div#main_menu div#main_menu_container{
/* container styling */
}
#main_menu #main_menu_container ul li{
/* list item styling */
}
#main_menu #main_menu_container ul li a{
/* anchor styling */
}
#main_menu #main_menu_container ul li.baq a{background:#3d9dff; color:white;}
#main_menu #main_menu_container ul li a:hover{
/* hover styling */
}
li.misplace{position:relative; top:-18px;}
jQUERY Code (I'm not familiar with jQuery, so I've enlisted someone else's help for this. Understanding the advice might be a bit beyond my expertise):
$(document).ready(function(){
// jQuery functions for products_button
});
$(document).ready(function(){
// jQuery functions for products hover
});
$(document).ready(function(){
// jQuery functions for products hover and mouseleave
});
$(document).ready(function(){
// jQuery functions for home_button, baq_button, header hover
});