改进下拉菜单的浮动行菜单

Question

当鼠标悬停在菜单标题下方时，我正在尝试制作带有滑动线的菜单。

它适用于“简单”菜单，但不适用于下拉菜单...

这里是JSFIDLE

我的代码：

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();

JS如何为下拉部分工作并且不下划线“Test0”菜单？

感谢您的帮助！

Answer 1

将悬停代码更改为：

$("#example-one li").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.width();

老实说，我不确定为什么将 a 与 class="dropdown-toggle" 一起使用会返回 0 的左侧位置，但这就是正在发生的事情。改用 li 似乎可行。

看到这个小提琴：http://jsfiddle.net/7hvrxw2c/42/