Allow me to shed some light on absolutely positioned elements that are often utilized 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%}
For an example, please refer to this jsfiddle.
1) When you have an ul (with children set to position absolute) nested within another ul.sf-menu (whose parent is positioned relative), your code may result in the child ul overlapping the parent ul.
2) To ensure that your child ul appears directly beneath the area of the parent ul without using fixed values, you can simply utilize top: 100% to facilitate its movement from top to bottom outside the boundaries of the parent ul.
3) In cases where the parent relative element has a border-bottom, employing top: 100% might cause overlap with said area. In such instances, you can amend the rule and opt for a custom value like 108% or any specific pixel measurement.
4) If the anchors have a predetermined height, removing it would be beneficial. However, if retaining the height is imperative, you can override it by applying height: auto.
5) Addressing the arrow issue – instead of having a fixed top value for the arrow (top: -0.01px), consider utilizing a different custom fixed value such as -10px or -20px. Alternatively, adhere to the same method applied to the child ul to allow the arrow to automatically position itself above the element.
6) Resetting the top value with top: auto and subsequently adding bottom: 100% will correctly position the arrow from the bottom 0 to bottom 100%, overlaying it at the top of the relative div. Whenever encountering issues with positioning properties like top, bottom, left, or right, opting for auto can help in overriding them.