下拉列表中的三角点显示不正确

Question

我希望三角形指针在父菜单和下拉菜单之间留出足够的 space。

我想要的是：
我所做的如下：

CSS 为三角形

 .sf-menu ul li:first-child a:after {
    content: '';
    position: absolute;
    left: 40px;
    top:-0.01px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #072438;


}

js fiddle:

http://jsfiddle.net/2athcwe9/

Answer 1

您只需调整 ul 和箭头上的 top 值：

.sf-menu ul li:first-child a:after {
  content: '';
  position: absolute;
  left: 40px;
  top:-10px; <-------
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #072438;     
}

.sf-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;    
  display: none;
  position: absolute;
  top: 63px; <---------------------
  left: 0;
  z-index: 99999;    
  background-color: #2D2D2D;   
  border-bottom:none;
  /* background-image: linear-gradient(#444, #111);   */ 
  /*-moz-border-radius: 5px;*/
  /*border-radius: 5px;*/    
}

FIDDLE

Answer 2

让我解释一下必须作为下拉列表放置的绝对元素：

.sf-menu ul {top: 100%}
.sf-menu li a {/*height: auto*/}
.sf-menu ul li:first-child a:after {top: auto; bottom: 100%}

此处示例：jsfiddle

1) 您在另一个 ul 中有一个 ul（children，绝对位置）。sf-menu（parent，相对位置）。您的代码的 children ul 的顶部固定值为 35px；它导致 children ul 与 ul parent 重叠。

2) 要让你的children ul 自动在你的ul parent 的区域下，你不必使用固定值，你可以使用top: 100%使其在 ul parent 区域之外从上到下移动。

3) 但对于您的特定情况，您的 parent 相对元素有一个 border-bottom，因此使用：top:100% 使其与该区域重叠。那么在这种情况下，您可以更改规则并使用自定义值作为 108% 或任何自定义 px 值。

4) 你的锚点有固定高度，你可以删除高度。但如果由于某种原因你不能，你可以用 height: auto.

覆盖它

5) 现在是箭头的问题。你的箭头有一个固定值的顶部（top: -0.01px），你可以用另一个自定义固定值来修复它，比如 -10px，-20px；但您可以应用应用于 children ul 的相同规则，并使其自动位于元素之外的顶部。

6) 你可以使用top:auto重置top的值，然后你可以添加一个bottom:100%。它将把你的箭头从底部 0 定位到 bottom 100% 在你的 div 亲戚的顶部。当您发现任何顶部、底部、左侧、右侧未按预期工作时，您可以使用 auto.

覆盖它们中的任何一个

下拉列表中的三角点显示不正确

Triangle point on dropdown not displaying properly

html

css