I'm attempting to create a menu with a sliding line under the menu title that appears when hovering over it.
It seems to work fine for a "simple" menu, but not for the dropdown menu...
Here is the JSFIDLE
My code:
HTML
<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item">
<a href="#">Home</a>
</li>
<li class=""><a href="#">Buy Tickets</a></li>
<li class=""><a href="#">Group Sales</a></li>
<li class=" dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>Test0</span> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="fa fa-tasks"></span> Test1</a></li>
<li><a href="#"><span class="fa fa-check"></span> Test2</a></li>
<li><a href="#"><span class="fa fa-file"></span> Test3</a></li>
<li><a href="#"><span class="fa fa-play-circle"></span> Test4</a></li>
</ul>
</li>
<li class=""><a href="#">The Show</a></li>
<li class=""><a href="#">Videos</a></li>
<li class=""><a href="#">Photos</a></li>
<li class=""><a href="#">Magic Shop</a></li>
</ul>
</div>
CSS
.nav-wrap {
background-color: rgba(0,0,0,0.6);
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.group:after { visibility: hidden; display: block; content: ""; height: 0; }
*:first-child+html .group { zoom: 1; }
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 960px;
}
#example-one li {
display: inline-block;
}
#example-one a {
color: #bbb;
font-size: 14px;
float: left;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example-one a:hover {
color: white;
}
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
.current_page_item a {
color: white !important;
}
.ie6 #example-one li, .ie7 #example-one li {
display: inline;
}
.ie6 #magic-line {
bottom: -3px;
}
ul.dropdown-menu {
min-width: auto;
}
li.dropdown:hover > ul {
display: inline!important;
}
.current_page_item_two a {
color: white !important;
}
JS
var $el, leftPos, newWidth;
$("#example-one").append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
$("#example-one li").find("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")
});
});
$(".current_page_item_two a").mouseenter();
How can I make the JS work for the dropdown section and avoid underlining the "Test0" menu?
Thank you for your assistance!