[CSS]CSS menu + JS magic line., pomoc w poprawnym wyświetleniu. Opcje

[casperii]

Panowie mam następujący kod;

[HTML] pobierz, plaintext 
<style>
nav select {
  display: none;
}
 
header nav {
position:absolute;
top:50%;
right:0;
margin-top:-8px;
z-index:9999;
}
 
header nav ul{
padding:0px;
list-style-image:none;
}
 
nav > ul > li {
display:inline-block;
position:relative;
}
 
nav > ul > li+li {
margin-left:28px;
}
 
nav a {
text-decoration:none;
}
 
header nav .sub-menu a:hover{
}
 
header .sub-menu li:hover {
}
 
nav > ul ul {
display:none;
}
 
.submenu {
overflow:hidden;
height:14px;
}
 
.submenu ul {
padding-bottom:1px;
}
 
.submenu strong {
float:left;
}
 
.submenu li {
float:left;
}
 
header .sub-menu {
position:absolute;
z-index:2;
left:-12px;
top:40px;
width:210px;
}
 
header .sub-menu a {
display:inline-block;
width:100%;
padding:9px 10px;
}
 
header .sub-menu .sub-menu {
left:231px;
top:0;
}
 
header .sub-menu .sub-menu:before {
content:'';
}
 
header .sub-menu li {
position:relative;
margin:0;
}
</style>
 
 
<header>
<nav>
<ul class="menu">
<li class="current-menu-item"><a href="#">Start</a></li>
<li>
<a href="#">Coś</a>
<ul class="sub-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li>
<a href="#">Link 3  &rarr;</a>
<ul class="sub-menu">
<li><a href="#">Podlink 1</a></li>
<li><a href="#">Podlink 2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li>
<a href="#">Coś 2</a>
 
[HTML] pobierz, plaintext 

Powyższy kod ma rozsuwane menu Start, coś, coś2 , ponadto link w menu coś ma podmenu link 1 i link 2 oraz link3 (który ma także swoje podmenu (podlink1, podlink2).

Teraz postanowiłem dodać fajną funkcję magic line - co to jest odsyłam do googla jak ktoś nie wie.
I tu się zaczynają schody bo za cholerę nie mogę sobie poradzić z CSS.

kod:

[HTML] pobierz, plaintext 
<style type='text/css'>
#magic-line { 
position: absolute; top: -2px; left: 0; width: 100px; height: 2px; background: #fe4902;
    -webkit-transition: background 400ms ease-in-out;
-moz-transition: background 400ms ease-in-out;
-ms-transition: background 400ms ease-in-out;
-o-transition: background 400ms ease-in-out
}
#magic-line.current-menu-item { 
position: absolute; top: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; 
}
#magic-line.hover {
    background:#00f;
    -webkit-transition: background 400ms ease-in-out;
-moz-transition: background 400ms ease-in-out;
-ms-transition: background 400ms ease-in-out;
-o-transition: background 400ms ease-in-out;
transition: background 400ms ease-in-out;
}
  </style>
 
<script type='text/javascript'>
$(window).load(function(){
$(function() {
 
    var $el, leftPos, newWidth,
        $mainNav = $(".menu");
 
    $mainNav.append("<div id='magic-line'></div>");
    var $magicLine = $("#magic-line");
 
 
 
    $magicLine
        .width($(".current-menu-item").width())
        .css("left", $(".current-menu-item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
 
    $(".menu li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
 
 
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
 
 
 
    $('.menu li:not(".current-menu-item")').hover(
        function(){ $('#magic-line').addClass('hover'); },
       function(){ $('#magic-line').removeClass('hover'); }
);
 
 
 
});
 
});
</script>
[HTML] pobierz, plaintext 

Powyższa funkcja dodaje do left:0 x pikseli. ale u mnie to wygląda tak, że:
- najechanie na coś, linia magiczna zostaje nad start (lekko się zmniejszy)
- najechanie na coś->link1, coś->link2, coś->link3, magiczna linia się rozszerza aż na szerokość od start do coś2 (gdzie powinno być tylko nad coś).
- najechanie na coś2, linia magiczna zostaje nad start (lekko się tylko poszerzy).

proszę o pomoc w poprawieniu CSS i wydaje mi się , że też trzeba będzie przerobić JS.

ktoś ma jakiś pomysł ?