Проблемное МЕНЮ для сайта
 

Огромная просьба помочь :help:

нужно сделать такое меню



Я пока четвертый день в jQuery, так что вот сварганил http://test-my-test.ucoz.com/menu/index.html
Являясь конченым педантом хочу сделать скрипт кроссбраузерным

скрипт слишком повторяем

и не работает в IE <9

JS

$(document).ready(function(){
    var link = window.location.pathname;
    $('.menu_top ul a[href="'+link+'"]').parent().parent().addClass('active');
  });

$(document).ready(function() {
    
  $('.in_menu_h').mouseenter(function() {
        $('.menu_top .active').children('.me_d7').css('height',($('.active').children('.me_d7').height()+5)).css('width',($('.active').children('.me_d7').width()+2));
        
    });
  $('.in_menu_h').mouseleave(function() {
        $('.menu_top .active').children('.me_d7').css('height',($('.active').children('.me_d7').height()-5)).css('width',($('.active').children('.me_d7').width()-2));
        $('.menu_top .active').children('.me_d7').css('border-radius', '10px 10px 0px 0px');
        $('.menu_top .active').prev('li').children('.me_d7').css('border-radius', '0px 0px 6px 0px');
        $('.menu_top .active').next('li').children('.me_d7').css('border-radius', '0px 0px 0px 6px');      
        $('.menu_top .active').children('.me_d7').css({"background-color":"#e61b23","border-bottom":"1px solid #e61b23","border-top":"1px solid #000000","border-right":"1px solid #000000","border-left":"1px solid #000000","box-shadow":"none"});
        if ($.browser.msie && $.browser.version < 9){
            $(this).children('.me_d7').css('height',($(this).children('.me_d7').height()-5));
        };
    });  
     $('.menu_top .active').each(function() {
        $(this).children('.me_d7').css('border-radius', '10px 10px 0px 0px');
        $(this).prev('li').children('.me_d7').css('border-radius', '0px 0px 5px 0px');
        $(this).next('li').children('.me_d7').css('border-radius', '0px 0px 0px 5px');      
        $(this).children('.me_d7').css({"background-color":"#e61b23","border-bottom":"1px solid #e61b23","border-top":"1px solid #000000","border-right":"1px solid #000000","border-left":"1px solid #000000","box-shadow":"none"});
        $(this).children('.me_d7').css('width',($(this).children('.me_d7').width()-2)).css('height',($(this).children('.me_d7').height()-5));
        if ($.browser.msie && $.browser.version < 9){
            $(this).children('.me_d7').css('height',($(this).children('.me_d7').height()+5));
        };
    }); 
    $('.in_menu_h li').mouseenter(function() {
        $('.in_menu_h li .me_d7').css('border-radius', '0px 0px 0px 0px');
        $('.in_menu_h li .me_d7').css('border-radius', '0px 0px 0px 0px'); 
        $('.in_menu_h li .me_d7').css({"background-color":"#636262","border-bottom":"1px solid #000000","border-top":"0px solid #000000","border-right":"0px solid #000000","border-left":"0px solid #000000","box-shadow":"inset 0 -9px 10px -10px #000"});
        $(this).children('.me_d7').css('border-radius', '10px 10px 0px 0px');
        $(this).prev('li').children('.me_d7').css('border-radius', '0px 0px 5px 0px');
        $(this).next('li').children('.me_d7').css('border-radius', '0px 0px 0px 5px');      
        $(this).children('.me_d7').css({"background-color":"#e61b23","border-bottom":"1px solid #e61b23","border-top":"1px solid #000000","border-right":"1px solid #000000","border-left":"1px solid #000000","box-shadow":"none"});
        $(this).children('.me_d7').css('width',($(this).children('.me_d7').width()-2)).css('height',($(this).children('.me_d7').height()-5));
        if ($.browser.msie && $.browser.version < 9){
            $(this).children('.me_d7').css('height',($(this).children('.me_d7').height()+5));
        };
    });
    $('.in_menu_h li').mouseleave(function() {
        $(this).children('.me_d7').css({"background-color":"#636262","border-bottom":"1px solid #000000","border-top":"0px solid #000000","border-right":"0px solid #000000","border-left":"0px solid #000000","box-shadow":"inset 0 -9px 10px -10px #000"});  
        $(this).prev('li').children('.me_d7').css('border-radius', '0px 0px 0px 0px');
        $(this).next('li').children('.me_d7').css('border-radius', '0px 0px 0px 0px'); 
        $(this).children('.me_d7').css('border-radius', '0px 0px 0px 0px');
        $(this).children('.me_d7').css('width',($(this).children('.me_d7').width()+2)).css('height',($(this).children('.me_d7').height()+5));
        if ($.browser.msie && $.browser.version < 9){
            $(this).children('.me_d7').css('height',($(this).children('.me_d7').height()-5));
        };    
            
   });   
 
});

HTML

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="admin" />
    <title>Меню</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
    <link href="reset.css" type="text/css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="menu_top">
    <div class="menu_h">
        <div class="menu_1h"></div>
            <ul class="in_menu_h">
	               <li class="me_l1"><div class="me_d7"><a href="/menu/index.html"><div id="menu1_in"></div></a></div></li>
	               <li class="me_l2"><div class="me_d7"><a href="/menu/1.html">бла</a></div></li>
	               <li class="me_l3"><div class="me_d7"><a href="/menu/2.html">бла</a></div></li>
	               <li class="me_l4"><div class="me_d7"><a href="/menu/3.html">бла</a></div></li>
	               <li class="me_l5"><div class="me_d7"><a href="/menu/4.html">бла</a></div></li>
	               <li class="me_l6"><div class="me_d7"><a href="/menu/5.html"><div id="_online_b">бла</div></a></div></li>
	               <li class="me_l7"><div class="me_d7"><a href="/menu/6.html">бла</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

CSS

.menu_top{
    height: 58px;
    width: 1010px;
    margin: 20px auto;
}
.menu_h{
    overflow: hidden;
    z-index: 55;
    position: absolute;
    background-color: #e61b23;
    height: 58px;
    width: 1010px;
    background: #e61b23;
    font:16px myriad pro, tahoma;
    border-radius: 10px 10px 0px 0px;
    behavior: url(/PIE/PIE.php);
}
.menu_1h{
    background-color: #636262;
    width: 980px;
    height: 10px;
    margin: 0px 20px;
    position: absolute;
}
.in_menu_h{ 
    overflow: hidden;
    z-index: 2;
    width: 1012px;
    position: absolute;
    height: 55px;
    background: transparent;
    border-radius: 10px 10px 0px 0px;
}
.in_menu_h li{
    background-color: transparent!important;
    float:left;
    height: 60px;
    
}
.in_menu_h li .me_d7{
    background-color: #636262;
    height: 54px;
    border-bottom: 1px solid #000000;
    box-shadow: inset 0 -9px 10px -10px #000;
    overflow: hidden;
  
}
.in_menu_h li .me_d7:hover{
    background-color: #e61b23;
    border-bottom:1px solid #e61b23;
}
.in_menu_h a{
    height: 37px;width: 100%;
    display: block;
    text-align: center;padding-top: 18px;
    text-decoration: none;
    color:#000000;
    cursor: pointer;	
}
#head_tbl td{
    vertical-align: top!important;
}
#menu1_in{
    margin: auto;
    width: 29px;
    height: 22px;
    background-image: url(/images/mmm_l.png);
    background-repeat: no-repeat;
}
.me_l1 .me_d7{
    border-top-left-radius: 10px!important;
    width: 85px;
}
.active .me_d7{
    background-image: none;
}
.me_l2 .me_d7{
    width: 190px;
}
.me_l3 .me_d7{
    width: 130px;
}
.me_l4 .me_d7{
    width: 115px;
}
.me_l5 .me_d7{
    width: 165px;
    border-bottom-right-radius: 0px!important;
}
.me_l6 .me_d7{
    background-color: #636262!important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    width: 190px!important;
    height: 54px!important;
    border: none!important;
    border-bottom:1px solid #000000!important;
    box-shadow:inset 0 -9px 10px -10px #000!important;
}
.me_l6 a{
    padding-top: 13px!important;
    color: #ffffff!important;
}
#_online_b{
    border-radius: 10px;
    padding-top: 5px;
    background-color: #e61b23;
    width: 150px;
    height: 25px;   
    margin: 0 auto;
}
.me_l7 .me_d7{
    border-bottom-left-radius: 0px!important;
    border-top-right-radius: 10px!important;
    width: 135px;
}




html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Скрипт хреновенький так что дорогие форумчане огромная просьба помочь!!!:blink: