Question

我正在尝试创建一个菜单，仅用于学习目的并更好地理解CSS。这是我的例子：

问题主要在于：

.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中打开，位于顶部菜单之后。但是，如果我使用＆＃34; fixed＆＃34;，则所有LI在左侧显示在彼此之上，就像在JSfiddle中一样。

Answer 1

这可以帮助您开始下拉菜单位置问题...

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

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

基本上，如果您使用position:absolute在DOM中放置元素，则会定位参考整个文档或DOM。但是，如果您定位其父元素position:relative，则子项将相对于其父项定位。

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

Javascript CSS菜单边框/框阴影

1 个答案: