Треугольник на выпадающем меню не отображается правильно

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; 


} 

JS скрипку:

http://jsfiddle.net/2athcwe9/

Answer 1

Позвольте мне объяснить кое-что о absoluted элементов, которые должны быть размещены в выпадающие:

.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-menu (родитель с относительным положением). В вашем коде есть ваши дети ul с верхом с фиксированным значением 35px; это привело к тому, что дети ul были перекрывающимися родителями ul.

2) Чтобы ваши дети ul автоматически находились под областью вашего родителя ul, вам не нужно использовать фиксированное значение, вы можете использовать top: 100%, чтобы заставить его перемещаться сверху вниз за пределы области ul parent.

3) Но для вашего конкретного случая ваш родительский относительный элемент имеет нижний край, поэтому использование: top: 100% делает его перекрытием этой области. В этой ситуации вы можете изменить правило и использовать пользовательское значение как 108% или любое значение пользовательских пикселей.

4) Ваши якоря имеют фиксированную высоту, вы можете удалить высоту. Но если по какой-то причине вы не можете, вы можете переопределить его с помощью height: auto.

5) Теперь проблема стрелы. Ваша стрелка имеет верхнюю часть с фиксированным значением (top: -0.01px), вы можете исправить ее с помощью другого настраиваемого фиксированного значения, такого как -10px, -20px; но вы можете применить одно и то же правило, применяемое к дочерним элементам ul, и автоматически включить его поверх своего элемента.

6) Вы можете сбросить значение top с помощью top: auto, а затем вы можете добавить дно: 100%. Он будет располагать вашу стрелку снизу 0 до bottom 100% над верхней частью вашего родственника div. Когда вы найдете верхний, нижний, левый, правый, который не работает так, как вы ожидали, вы можете переопределить любой из них с помощью auto.

Answer 2

вам просто нужно настроить 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