下拉列表上的三角形点未正确显示

Question

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

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

三角形的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;


}

小提琴：

http://jsfiddle.net/2athcwe9/

Answer 1

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

.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.sf菜单（具有位置相对的父级）中。 你的代码有你的孩子ul，顶部的固定值为35px;它导致儿童ul与父母重叠。

2）为了让你的孩子自动处于你父母的区域之下，你不必使用固定值，你可以使用top: 100%使其从上到下移动ul父母的区域。

3）但是对于您的特定情况，您的父亲相对元素具有边框底部，因此使用：top：100％使其与该区域重叠。在这种情况下，您可以更改规则并将自定义值用作108％或任何自定义px值。

4）你的锚具有固定的高度，你可以删除高度。但如果由于某种原因你不能，你可以用height: auto覆盖它。

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

6）你可以使用top：auto重置top的值，然后你可以添加一个底部：100％。它会将你的箭头从底部0定位到你的div相对顶部的bottom 100%。当您发现顶部，底部，左侧，右侧无法按预期工作时，您可以使用auto覆盖其中任何一个。