Javascript CSS菜单边框/框阴影

Question

我想创建一个菜单，只是为了学习的目的，并更好地理解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里，子菜单根本不会显示，因为我认为它打开在同一个div中，在顶部菜单的后面。但是如果我使用“fixed”，所有的LI都会显示在左边的顶部，就像JSfiddle一样。

Answer 1

这应该让你开始你的下拉菜单中的位置问题...

https://jsfiddle.net/p2dtswy7/1/

基本上你想要做的是position:relative父元素（父李）。然后下拉（或子）ul你想给position:absolute。然后你可以开始像素推动它，直到它很好地播放。

基本上，如果你在DOM与position:absolute位置的元件将被定位参考整个文档或DOM。但是，如果您放置其父元素position:relative，那么子元素将相对于其父元素进行定位。

关于你最初的双边界问题...会有这样做的方法。我可能会在ul的开始和结尾添加虚拟列表项，并将边框/阴影添加到这些项目中。然后，您可能需要使用：first-child和last-child隐藏其他边框和阴影。然而，这种解决方案会产生很多不必要的标记，以获得很少的收益......恕我直言，我认为你创建的东西已经看起来不错了，并且没有客户端会把你拉上这样的细节。 :)