html - 下拉列表中的三 Angular 点显示不正确

Question

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

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

三 Angular 形的 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