How does this drop-down have the ^ shown?

Question

I just found a nice script you can see it over here

http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/

I saw the drop down has a little ^ on top. On the css I could find this:

#colorNav li ul li:first-child:before{ 
    content:none;
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}

Only I can't understand how this is working; does it have something to do with the border?

Answer 1

This CSS operates on the following markup (reduced for simplicity):

<nav id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Back to the tutorial</a></li>
                <li><a href="#">Get help</a></li>
            </ul>
        </li>
        <li class="red">
            <a href="#" class="icon-cogs"></a>
            <ul>
                <li><a href="#">Payment</a></li>
                <li><a href="#">Notifications</a></li>
            </ul>
        </li>
    </ul>
</nav>

The selector targets the :before pseudo-element on the inner-most li elements that are also the first elements within their parent:

#colorNav li ul li:first-child:before

Missing from your code here, but present in the original tutorial, was the following comment:

/* the pointer tip */

This particular set of rules is for creating the small triangle that appears at the top of the dropdown menus, pointing up to their associated block (pictured below, emphasized with a red circle):

The styles then follow for creating this triangular shape:

content: none;                  /* Pseudo-element has no content    */
position: absolute;             /* It's positioned absolutely       */
width: 1px;                     /* It has a width of 1 pixel        */
height: 1px;                    /* And a height of 1 pixel too      */
border: 5px solid transparent;  /* Applies initial border style     */
border-bottom-color: #313131;   /* Overrides bottom border color    */
left: 50%;                      /* Moves it half-way from the left  */
top: -10px;                     /* And 10px up above the element    */
margin-left: -5px;              /* Margin, half of width, to center */

The end-result, is a triangle created purely with borders in CSS.