我正在尝试创建一个菜单，只是为了学习目的和更好地理解 CSS。这是我的例子:
https://jsfiddle.net/3eacLaxz/
问题主要出在这里:
.testul li ul li {
position: fixed;
top: 99px;
list-style: none;
white-space: nowrap;
height: 24px;
line-height: 24px;
background: -webkit-linear-gradient(#c8bfb0, #f5efe6);
border-bottom: 1px solid #d3c7b6;
z-index: 50;
}
我的问题是，一旦单击菜单按钮，子菜单应该显示在最左侧，并且应该只显示每个子菜单链接并排显示。如本例所示:
http://i.imgur.com/n6XmVxM.png
我尝试使用定位，但无法修复它。每当我改变位置时:固定；在 .testul li ul li 中，子菜单不再显示，因为我认为它在同一个 div 中打开，位于顶级菜单的后面。但是如果我使用“fixed”，所有 LI 都会在左侧显示在彼此之上，就像在 JSfiddle 中一样。
最佳答案
这应该让您开始解决下拉菜单位置问题...
https://jsfiddle.net/p2dtswy7/1/
基本上你想要做的是 position:relative 父元素(父 li)。然后是您要给 position:absolute 的下拉列表(或子项)ul。然后，您可以开始对它进行像素插入，直到它播放得很好。
基本上，如果您使用 position:absolute 在 DOM 中定位一个元素，它将引用整个文档或 DOM 进行定位。但是，如果您定位其父元素 position:relative，则子元素将相对于其父元素定位。
关于您最初的双边框问题……有一些方法可以做到这一点。我可能会在 ul 的开头和结尾添加虚拟列表项，并向其中添加边框/阴影。然后你可能需要使用 :first-child 和 :last-child 隐藏它们的其他边框和阴影。但是，此解决方案会产生很多不必要的标记，而 yield 却很少……恕我直言，我认为您创建的内容看起来已经很不错了，没有客户会在这样的细节上吸引您。 :)
关于Javascript CSS 菜单边框/框阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31357319/