How is this disclosure shown?

Question

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

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

I saw the lunge down a little up. On 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 not understand how this works; Does he have something to do with the border?

Answer 1

This CSS works with 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 internal li elements, which are also the first elements in the parent object:

 #colorNav li ul li:first-child:before 

Your code is missing here, but present in the source tutorial, there was the following comment:

 /* the pointer tip */ 

This specific set of rules is designed to create a small triangle that appears at the top of the drop-down menu, pointing to the corresponding block (in the photo below, underlined by a red circle):

The following are the styles for creating a triangular shape:

 content: none; /* Pseudo-element has no content */ position: absolute; /* It 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 exclusively with borders in CSS.

Answer 2

It creates a fake region of the area #colorNav li ul li:first-child with content:''; and manages this area with other css styles.

Answer 3

 #colorNav li ul li:first-child:before { ... } 

The first-child selector is used to select the specified selector only if it is the first child of its parent.

 content:''; 

The content property is used with: before and: after pseudo-elements, to insert generated content.

Hope this helps you?