Custom drop down CSS Submenu bar

Question

So far, I have made a regular menu bar, but I am not sure how to make a custom CSS submenu bar like this one shown. Anyone have any pointers?

Picture:

How do you make the little arrow pointing up to the Layouts button?

Answer 1

The little triangle is a combination of 3 things:

• The :before or :after pseudo selectors
• Relative positioning
• CSS Triangles

So basically style the :before of the menu into a triangle using those rules and set it's position appropriately. You might need to do something like content: ' '; height: 0; width: 0; overflow: hidden; on the pseudo selector to make it work.

Answer 2

Historically this has been done by inserting a triangular shaped image and positioning it just outside the box.

You can however, do this with CSS transform: rotate(45) or with an icon font. I will try and post a code snippet here later.

Answer 3

This codepen shows how to do it: http://codepen.io/anon/pen/iEvDn

I did not create it, I found it here: https://css-tricks.com/forums/topic/triangle-shape-in-the-menu/

The key part of the css in the code pen is the ::before selector:

.box:before{
  content:'';
  position:absolute;
  width:20px;
  height:20px;
  left:-10px;
  top:20px;
  transform:rotate(145deg) skew(20deg);
  background:inherit;
}

EDIT

Here is a fiddle I created based off the info from the codepen, this one has the triangle on top like you want: https://jsfiddle.net/jrs7oxb0/1/