Javascript CSS 菜单边框/框阴影答案

【问题标题】：Javascript CSS Menu borders / box shadowsJavascript CSS 菜单边框/框阴影
【发布时间】：2015-07-12 18:26:16
【问题描述】：

我正在尝试创建一个菜单，只是为了学习目的和更好地理解 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 中打开，在顶部菜单后面。但是，如果我使用“固定”，所有 LI 都会在左侧相互叠加显示，就像在 JSfiddle 中一样。

【问题讨论】：

标签： javascript css menu onclick border

【解决方案1】：

这应该可以帮助您解决下拉菜单位置问题...

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

基本上你要做的是position:relative父元素（父li）。然后是您想要提供position:absolute 的下拉列表（或子项）。然后，您可以开始对它进行像素推送，直到它可以正常播放为止。

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

关于你最初的双边框问题......会有办法做到这一点。我可能会在 ul 的开头和结尾添加虚拟列表项，并为其添加边框/阴影。然后你可能需要使用 :first-child 和 :last-child 隐藏它们的其他边框和阴影。然而，这个解决方案会产生很多不必要的标记，而收益却很少……恕我直言，我认为您创建的内容已经看起来很流行，没有客户会为您提供这样的细节。 :)

【讨论】：

谢谢，确实很好的解释，虽然因为我总是想把所有事情都做到完美，我只想修复那些分隔符，也因为我很好奇如何真正完成它。不过谢谢你的解释，我会玩这个，看看我能不能从中学到什么:)
我也喜欢让一切都变得完美...... :) 但是当涉及到专业开发时，需要减少时间、精力和臃肿的代码才能完成工作时间和预算......特别是当唯一会注意到细节的人是你！ :)
不幸的是，我又回到了原来的问题：D 我需要子菜单链接水平显示，而不是像现在这样垂直显示。此外，当我单击按钮时，子菜单应完全显示在左侧。但我仍然可以玩弄这些位置，看看我能不能把它修好:)
...原理一样，这次是父ul（不是li）有相对定位，子ul是绝对定位。子列表项也是 display:inline-block; - 这使它们连续显示。
谢谢，您的回答有效，但对我不起作用，因为我正在使用：* { margin:0;填充：0；溢出：隐藏； } 更新了我的小提琴jsfiddle.net/3eacLaxz 为例。