menu a discesa con la parte superiore del triangolo

Question

Voglio creare un menu a discesa come questo:

http://www.howdyjeff.com/

ma non posso orizzontale centrare il triangolo superiore e il menu a discesa (sulla base del li a) e Sto riscontrando un problema :hover, perché il menu a discesa ul si dissolve.

come posso farlo?

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

Per centrare la freccia, è possibile aggiungere questo:

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

Per fissare la discesa non rimane, dare abbastanza padding inferiore come questo:

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

Aggiornato: discesa e freccia centraggio:

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