Dropdown-Menü mit Top-Dreieck

Question

Ich mag ein Dropdown-Menü wie folgt erstellen:

http://www.howdyjeff.com/

aber ich kann nicht horizontal das obere Dreieck zentrieren und das Dropdown-Menü (auf der Grundlage der li a) und Ich habe ein :hover Problem, weil das Dropdown ul verblasst.

Wie kann ich das tun?

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

Für den Pfeil Zentrierung, können Sie hinzufügen:

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

der Dropdown-Liste nicht zu beheben bleiben, geben genug unten padding wie folgt aus:

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

Aktualisiert: Drop-Down-Pfeil und Zentrierung:

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); 
    }); 
});