html - 如何让悬停时的下拉菜单不影响边框底部并且不缩进？

Question

http://pvpers.net/new/是我的基本样式测试站点。

我正在尝试让下拉菜单(例如:将鼠标悬停在“游戏”上)出现在我用于导航的边框底部下方，而不是移动当前边框底部。另外，我不希望悬停影响列表导航中游戏 li 的自动宽度。

而且我知道缩进是由于列表在另一个 UL 中。我可以在不弄乱边距、填充等的情况下摆脱它吗？

你可以在测试站点看到我做了什么。

谢谢!!

Answer 1

二级菜单必须使用绝对位置。

尝试添加这些。

nav ul#navul li {
  transition: all .15s ease-in-out;
  display: inline;
  float: left;
  border-bottom: 2px solid #8d0000;
  position: relative;
}
.secondlvl {
  position: absolute;
  top: 38px;
  left: -40px;
  width: 145px;
}