Помотрите пожалуйста ссылку
http://exportgrain.org/btn_proba.php-вот так должно работать меню, когда же я подвигаю кнопки ближе друг к другу происходит перекрытие элементов class="company_btn" и class="main_btn", и меню начинает работать не верно а именно так
http://exportgrain.org/btn_proba2.phpЧто можете посоветовать?Причем что интересно ИЕ отрабатывает как должно
<style>
.main_btn{
background: url(img/main_btn.png);
width: 158px; /* Ширина рисунка */
height: 74px; /* Высота рисунка */
z-index:2;
position:absolute;
margin-left:-30px;
}
#main_btn_block{
width: 70px; /* Ширина рисунка */
height: 74px; /* Высота рисунка */
margin-left:30px;
position:absolute;
}
.main_btn_hover{
background: url(img/main_btn_active.png);
width: 158px; /* Ширина рисунка */
height: 74px; /* Высота рисунка */
// margin-top:0px; /* для всех ie */
z-index:1;
position:absolute;
margin-left:-30px;
}
.company_btn{
background: url(img/company_btn.png);
width: 185px; /* Ширина рисунка */
height: 74px; /* Высота рисунка */
z-index:2;
position:absolute;
}
#company_btn_block{
width: 100px; /* Ширина рисунка */
height: 74px; /* Высота рисунка */
position:absolute;
margin-left:128px;
}
.company_btn_hover{
background: url(img/company_btn_active.png);
width: 185px; /* Ширина рисунка */
height: 74px; /* Высота рисунка */
// margin-top:0px; /* для всех ie */
z-index:1;
position:absolute;
}
#menu{
position:absolute;
}
</style>
<div id="menu">
<div id="main_btn_block">
<p><a href="#" class="main_btn" usemap="#map"></a></p>
<p><a href="#" class="main_btn_hover"></a></p>
</div><!--main_btn_block-->
<div id="company_btn_block">
<p><a href="#" class="company_btn"></a></p>
<p><a href="#" class="company_btn_hover"></a></p>
</div><!--company_btn_block-->
</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#main_btn_block').stop().mouseover(function(){
$('.main_btn').fadeOut(500);
});
$('#main_btn_block').stop().mouseleave(function(){
$('.main_btn').fadeIn(500);
});
$('#company_btn_block').stop().mouseover(function(){
$('.company_btn').fadeOut(500);
});
$('#company_btn_block').stop().mouseleave(function(){
$('.company_btn').fadeIn(500);
});
});
</script>