Triangle point on dropdown not displaying properly - html

Question

I want the triangle shaped pointer to leave enough space between the parent and dropdown menu.
What I want is as below:
What I have done is as below:
CSS for the triangle
.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

you just need to adjust your top values on the ul and the arrow:
.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

Let me explain something about absoluted elements that must be placed as dropdowns:
.sf-menu ul {top: 100%}
.sf-menu li a {/*height: auto*/}
.sf-menu ul li:first-child a:after {top: auto; bottom: 100%}
Example here: jsfiddle
1) You have an ul (children with position absolute) inside another ul.sf-menu (parent with position relative).
Your code have your children ul with a top with a fixed value of 35px; it caused that the children ul were overlapping ul parent.
2) To make your children ul to be automatically under the area of your ul parent, you don't have to use a fixed value, you can use top: 100% to make it move from top to bottom outside the area of the ul parent.
3) But for your particular case, your parent relative element has a border-bottom, so using: top:100% makes it overlap that area. Well in this situation you can alter the rule and use a custom value as 108% or any custom px value.
4) Your anchors have a fixed height, you can delete the height. But if for some reason you can't, you can override it with height: auto.
5) Now the problem of the arrow. Your arrow have a top with fixed value (top: -0.01px), you can fix it with another custom fixed value like -10px, -20px; but you can apply the same rule applied to children ul and make it automatically be on top outside of your element.
6) You can reset the value of top using top: auto, and then you can add a bottom: 100%. It will position your arrow from bottom 0 to bottom 100% over the top of your div relative. When you find any top, bottom, left, right that doesn't work as you expected, you can override any of them with auto.