Upper Triangle Dropdown Menu

Question

I want to create a dropdown menu similar to this:

http://www.howdyjeff.com/

but I tilt horizontally the center of the upper triangle and the dropdown menu (based on li a ) and I have a problem with :hover because the ul dropdown menu disappears.

How can i do this?

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 { 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

To center the arrow, you can add this:

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

To fix the drop-down menu is not left, give a sufficient bottom addition as follows:

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

Updated: drop-down menu and arrow:

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