我已经尝试了将近3个星期，但是还没有成功。我需要一些调整下拉菜单的帮助。我会尽力使您了解我的需求。
我的博客上有一个水平菜单，第二级和第三级元素下拉。有什么方法可以使最后一个元素及其水平元素下降而不是下降？我的意思是，请查看菜单上的第四类-当前事务。鼠标悬停时，其第二个元素是SPORTS。再次将鼠标悬停在“运动”上，板球，网球，羽毛球等向右浮动并下降。我希望的是将SPORTS保持在当前事务列表的底部（而不是列表的第二位），其元素-板球，网球，羽毛球等首先要向右浮动（如目前一样），然后下降，而不是下降。
我要实现的一个示例就是这个示例-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;}我正在为您的确切问题编辑我以前的答案...
干得好 ..
#menutop .menu-sub ul li a{
position: relative;
}
#menutop .menu-sub .menu-sub ul{
position: absolute;
top: -75px;
}
这应该工作正常。。。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句