Question

我有一个链接导航，在悬停时下降（效果很好），然后在li ul li元素悬停时向右滑动。

HTML：

<div id="main-links">

    <div id="main-links-content">

        <ul class="topnav">

            <li><a class="link active" href="index.php">Aberdeen Taxis</a></li>
            <li><a class="link" href="#!">About Us</a>
                <ul class="dropdown">
                    <li><a href="#!">Who are we?</a>
                        <ul>
                            <li><a href="#">Meet the team</a></li>
                        </ul>
                    </li>
                    <li><a href="#!">Why use us?</a>
                        <ul>
                            <li><a href="#">Health & Safety Policy</a></li>
                        </ul>
                    </li>
                    <li><a href="#!">Our commitment to the environment</a>
                        <ul>
                            <li><a href="#">Environmental Policy</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li><a class="link" href="#!">Our Services</a></li>
            <li><a class="link" href="#!">Our Tours</a></li>
            <li><a class="link" href="#!">Our Fares</a></li>
            <li><a href="#">Online Booking</a>
                <ul class="dropdown">
                    <li><a href="onlinebooking-ab/login-cash.php">Cash Booking</a></li>
                    <li><a href="onlinebooking-ab/login.php">Account Booking</a></li>
                    <li><a href="onlinebooking-ab/login-guest.php">Credit Card Booking</a>
                        <ul>
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li><a class="link" href="#!">Contact Details</a></li>
        </ul>

    </div>

</div>

JSFiddle链接：http://jsfiddle.net/mrnaysilva/3Ucd4/

我相信问题就在这里（但我可能错了）： -

#main-links-content ul ul ul {
    left: 100%;
    position: absolute;
    top: 80px;
    width: 180px;
    max-width: 200px;
}

基本上我设置了width和top位置。我想要发生的是宽度设置为auto，但是当我将其设置为auto时，它不会根据其中的段落文本设置宽度。另外，因为我设置了top位置，所以它总是在底部li上显示侧边菜单，我希望它显示在悬停的li元素的右侧。

即。如果我将鼠标悬停在About Us上，然后将鼠标悬停在Who are we?上。Meet the team应显示在Who are we?的右侧。

我只是不确定如何实现这一目标。

Answer 1

问题

无效的主要问题是子position: relative;元素的<li>。

这是因为您使用display: table-row;

如规格中所述：

'position：relative'对table-row-group的影响， table-header-group，table-footer-group，table-row，table-column-group， table-column，table-cell和table-caption元素未定义。

来源：http://www.w3.org/TR/CSS2/visuren.html#propdef-position

如何解决这个问题？

您可以在table-row内使用具有position: relative;属性的元素：

<li>
  <div class="dropdownWrap">
    <a href="#!">Our commitment to the environment</a>
    <ul>
      <li>
         <a href="#">Environmental Policy</a>
      </li>
    </ul>
  </div>
</li>

.dopdownWrap的css是：

.dropdownWrap
{
    width: 100%;
    height: 100%;
    position: relative;
}

jsFiddle

请注意，我只使用“关于我们”标签执行此操作。

关于javascript的一些注释

您可以使用>选择器找到直接子元素。这样您就不必排除具有.not()功能的元素。更多信息 here

不是单独定义.slideUp()和.slideDown()，而是可以使用slideToggle在一行中定义它们（这是因为动画的速度相同）。

关于css + html的一些注释

如果您要为元素分配类和ID，那么您也可以在css中使用它们。例如：你永远不会在你的CSS中调用类.dropdown。这些ID和类中有更多从未使用过。

希望这有助于你！

修改

jQuery UI功能幻灯片将起到此作用，因为它只会在mousein功能完成时播放mouseout功能。通常，您可以使用.stop()取消上一个动画。但似乎jQuery UI幻灯片不支持这一点。所以我建议你只使用普通的jQuery：

$("#main-links-content li ul li").hover(function () { $(this).find(' > div > ul').stop(true).animate({left: "100%"}, 300) }, function () { $(this).find(' > div > ul').stop(true).animate({left: ""}, 300); });

这是一篇很棒的文章：http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

我还在下拉菜单中添加了.stop()功能来修复任何延迟错误。

jsFiddle

您可能希望查看css transition，因为它基本上与您现在的行为相同。这是一个css转换示例： jsFiddle
第一个slideToggle没有在css中完成，因为它在jQuery中更容易和“更好”（使用css时不会有动态高度，这会导致动画延迟）。

CSS - 导航链接侧面菜单

1 个答案:

问题

如何解决这个问题？

jsFiddle

关于javascript的一些注释

关于css + html的一些注释

jsFiddle