DROPS ENABLED🔴EVENT CHALLENGES COMP COMMANDS

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=xzhjpJ4BRWY

In this tutorial we will learn to create CSS horizontal drop down menu. • Don't forget to check out our site http://howtech.tv/ for more free how-to videos! • / ithowtovids - our feed • / howtechtv - join us on facebook • https://plus.google.com/1034403827176... - our group in Google+ • Drop down menu is a part of almost every web page today. These menus give a nice solution of choosing from the list of items to website visitors as well to Web Developers, so that they don't have to worry about the presentation, as it can be now combined with appealing effects through CSS styling. • Follow this step by step easy tutorial to learn to create Horizontal drop down menu through CSS and see how to give different effects on it. • Step 1 - Main Div of the Menu • First of all, open up the div tag , just after the body tag, and give it an id. This is our main div which will contain all the elements. • After that, open up an unordered list tag and then open up the list tag to define its members. We will insert the hyperlink tag which is called an anchor tag. • Then after this, we will write the heading for the first list. As this would act as the parent category, define it as Main Category One . • After that, open up an unordered list tag again and then define the child members for the • Main category, in the same manner as we did earlier. This list will be considered as the sub categories of our main menu. • 'body' • 'div id= global-nav ' • 'ul' • 'li''a href= #One 'Main Category 1'/a' • 'div id= global-subnav ' • 'ul' • 'li''a href= #A 'Sub Category '/a''/li' • 'li''a href= #B 'Sub Category '/a''/li' • 'li''a href= #C 'Sub Category '/a''/li' • 'li''a href= #D 'Sub Category '/a''/li' • '/ul' • '/div' • '/li' • Step 2 - Second Main Category • With that done, we will follow the same pattern to make another category in our drop down menu. • We will start with the (li) tag and follow exactly the same pattern as before. • The Code for that would be: • (li)(a href= #Two )Main Category 2(/a) • (div id= global-subnav ) • (ul) • (li)(a href= #1 )Sub Category (/a)(/li) • (li)(a href= #2 )Sub Category (/a)(/li) • (li)(a href= #3 )Sub Category (/a)(/li) • (li)(a href= #4 )Sub Category (/a)(/li) • (/ul) • (/div) • (/li) • Step 3 - Global- Navigation Class Explained • Now add the CSS Styling on the drop down menu. • For that, open up the style tag beneath the HTML header and assign text/ css in style type. • Then describe the working of the classes, starting with the very first class we used, the global- nav class. This class is responsible for the Main look of the Menu. We have set its width to 135 pixels with left as its default position along with a background color. • Code for that would be: • #global-nav • width: 135px; • float: left; • background: #e8eef4; • • Step 4 - Anchor Class • After that, define the effects of the anchor tag. In this class, we are actually describing the effect of all the anchor tags inside the global-nav class and specifying it a particular color, with a cursor type as pointer and setting its alignment as well. • The Code is: • #global-nav a • color: #034af3; • cursor: pointer; • display: block; • height: 65px; • line-height: 40px; • text-indent: 10px; • text-decoration:none; • font-weight: bold; • width: 100%; • • Step 5 - Contents of Main Menu • With that done, the effect of the Main Menu's contents is described in the global-nav ul class. The background color is specified as white smoke along with zero in padding and margins. • The code for this class would be: • #global-nav ul • background: whitesmoke; • padding: 0; • margin: 0; • • Step 6 - Sub Navigation Class • Next, we have defined the sub navigation menu class. This class will be responsible for the effect of the sub menu. We are using Grey as a background color and aligning it, with 80 pixels for the left side and minus 20 pixels for the top. • Code would be: • #global-subnav ul • background: Grey; • position: relative; • left: 80px; • top:-20px; • • Step 7 - Global --Nav Li class • After that, the borders of the list elements are defined in the global --nav li class. • We are setting a solid color effect of border at bottom having a width of 3 pixels. • Its code would be: • #global-nav li • list-style: none; • border-bottom: #5C87B2 solid; • border-width: 3px;

#############################

New on site