Adding Arrow to Menu

While working on the menu's. I wanted to add a new features of Arrow to the menus. To add a Arrow where a child menu is present with the "Parent Menu".
Following is the sample of what we are going to create:

The "Product" and "Services" menus are the ones with sub/child menu. To indicate that these menus are having the child menus arrows are displayed on right side of the menu.


Along with the parent menu "Product" first child menu "Product 1" is also having the arrow to indicate the arrow for multilevel sub-menu.

Now following is the HTML code for the menu:





Each level of menu is assigned a class for parent menu "parent_menu"  and for child menu "child_menu".
Another class is added for "Arrow" to the parent menus "has_child".

Following is the CSS code for creating and displaying the "Arrow" for the parent menu:
:after and :before pseudo classes are used to create the arrow.
For creating the arrow use the content property and set the position to "absolute".  Also note that to use only use the one property out of top, bottom, right, left and also use the margin property to set the proper position of the arrow.

• 
  
• .menucontainer li.has_child:after
• {
•     content: '';
•     position: absolute;
•     border: 7px solid transparent;
• /* This will set the direction of the arrow.*/
•     border-top: 7px solid white;
•     top: 34px;
•     margin-left: 5px;  
• }

Following is the hover effect for the arrow with menu.

• .menucontainer li.has_child:hover:after
• {
•     content: '';
•     position: absolute;
•     border: 7px solid transparent;
•     border-top: 7px solid black;
•     top: 34px;
•     margin-left: 5px;  
• }
• 
  

You can find the complete code on the jsFiddle: "Arrow to Menu"