如何使第二级菜单的最后一个元素下拉？

Question

我已经尝试了将近 3 周，但还没有成功。我需要帮助来调整一下我的下拉菜单。我会尽力让你明白我在找什么。

我的博客上有一个水平菜单，二级和三级元素下拉。有什么方法可以使最后一个元素及其级别元素下降而不是下降？我的意思是，看看我菜单上的第四类——时事。在鼠标悬停时，它的第二个元素是 SPORTS。 再次将鼠标悬停在 SPORTS 上，板球、网球、羽毛球等向右浮动并下降。 我希望将 SPORTS 保持在 CURRENT AFFAIRS 列表的底部（而不是列表中的第二位），并且它的元素 - 板球、网球、羽毛球等首先向右浮动（就像他们目前所做的那样），然后下降，而不是下降。

我想要实现的一个例子就是这个 - http://www.cssplay.co.uk/menus/final_pullup.html 当我们将鼠标悬停在 DEMOS 上，然后在 ACTIVE FOCUS 上时，元素会向右飞出然后下降。我也希望如此。 我不打算有一个完全的下拉菜单，而是只希望列表中的最后一个底部元素向右飞出，然后它的关卡元素下拉，就像它发生在 ACTIVE FOCUS 元素中一样。 有人可以指导我如何实现吗？

这是菜单的当前 CSS -

/* Horizontal Menu */
#menutop ul,#menutop li,#menutop span,#menutop a {margin:0;padding:0;
position:relative;}
#menutop {height:49px;background:#1a1b1f;width:auto;position: relative;}
#menutop:after,#menutop ul:after {content:'';display:block;clear:both;}
#menutop a {background:#1a1b1f;color:#e0d4d4;display:inline-block;font-family:'Oswald';font-size:15px;font-weight:300;line-height:49px;padding:0 20px;text-decoration:none;transition:all 0.3s ease;}
#menutop ul {list-style:none;}
#menutop > ul,#menutop > ul > li {float:left;}
#menutop > ul > li > a {color:#e0d4d4;font-size:15px;}
#menutop > ul > li.active > a {background:1a1b1f;color:#e0d4d4;}
#menutop > ul > li:hover > a {background:#2f82c3;color:#fff;}
#menutop .menu-sub {z-index:1;}
#menutop .menu-sub:hover > ul {display:block;}
#menutop .menu-sub ul {display:none;position:absolute;width:170px;top:100%;left:0;box-shadow:0 1px 3px 0 rgba(0,0,0,0.3);border-radius:2px;}
#menutop .menu-sub ul li {margin-bottom:0px;}
#menutop .menu-sub ul li a {background:#236ea8;font-size:15px;display:block;line-height:120%;padding:10px;color:#f6f6f6;transition:all 0.3s ease;}
#menutop .menu-sub ul li:hover a {background:#459bb6;color:#fff;}
#menutop .menu-sub .menu-sub:hover > ul {display:block;}
#menutop .menu-sub .menu-sub ul {display:none;position:absolute;left:100%;top:0;}
#menutop .menu-sub .menu-sub ul li a {background:#459bb6;color:#fff;transition:all 0.8s ease-in-out;}
#menutop .menu-sub .menu-sub ul li a:hover {background:#3d8ba4;color:#fff;}

Answer 1

我正在为您的确切问题编辑我之前的答案...

给你..

#menutop .menu-sub ul li a{
position: relative;

}

#menutop .menu-sub .menu-sub ul{
position: absolute;
top: -75px;
}

这应该可以正常工作。 . .

Answer 2

这是来自您要更改的网站。

现在试试这个

#menutop {
    height: 49px;
    background: #1a1b1f;
    width: auto;
    position: relative;
}

.menu ul ul {
    visibility: hidden;
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 150px;
}