thả xuống menu với đỉnh tam giác

Question

Tôi muốn tạo ra một trình đơn thả xuống như thế này:

http://www.howdyjeff.com/

nhưng tôi không thể theo chiều ngang trung tâm tam giác trên và trình đơn thả xuống (dựa trên li a) và Tôi đang gặp sự cố :hover, vì menu thả xuống ul sẽ biến mất.

Tôi làm cách nào để thực hiện điều đó?

JSFiddle:

https://jsfiddle.net/zw5rqzut/

html { 
 
    text-align: center; 
 
} 
 
nav { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #000; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 1em 
 
} 
 
ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #000; 
 
    top: 50px; 
 
} 
 
ul ul:after { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: -8px; 
 
    width: 0; 
 
    height: 0; 
 
    content: ''; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-bottom: 20px solid #000000; 
 
} 
 
a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
li:hover ul { 
 
\t display:block; 
 
}

<nav> 
 
    <ul> 
 
     <li> 
 
      <a href="#">Dropdown1</a> 
 
      <ul> 
 
       <li><a href="#">Option1</a></li> 
 
       <li><a href="#">Option2</a></li> 
 
       <li><a href="#">Option3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Dropdown2</a> 
 
      <ul> 
 
       <li><a href="#">Option1</a></li> 
 
       <li><a href="#">Option2</a></li> 
 
       <li><a href="#">Option3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Dropdown3</a> 
 
      <ul> 
 
       <li><a href="#">Option1</a></li> 
 
       <li><a href="#">Option2</a></li> 
 
       <li><a href="#">Option3</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

Answer 1

Đối với trung vào mũi tên, bạn có thể thêm này:

ul ul:after { 
    margin-left: -20px; 
} 

Để khắc phục thả xuống không ở lại, cung cấp cho đủ đệm phía dưới như thế này:

nav > ul > li > a { 
    padding-bottom: 50px; 
} 

Cập nhật: trung thả xuống và mũi tên:

Demo http://jsfiddle.net/esjrhg5n/

$(document).ready(function() { 
    $("nav > ul > li").mouseover(function() { 
     var the_width = $(this).find("a").width(); 
     var child_width = $(this).find("ul").width(); 
     var width = parseInt((child_width - the_width)/2); 
     $(this).find("ul").css('left', -width); 
    }); 
});