How to Make Professional Web Blog: How to Create DropDowm Menu Navigation bar on You Blog

Step1: Go To blogger Edit Area

Step2: Click on Layout

Step3: Click on Add gadget

Step4: Select HTML/Javascript Gadget

Step5: Copy and Past following code on HTML/Javacript Gadget HTML box

Step6: Publish

Step7: Move this Gadget Below the Existing menu bar

Step8: Save it

<li><a href="your site url">About Us</a></li>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<li><a href="contact page url">Contact me</a></li>

</li>

</li></li></ul></div>

*************************End******************

Then Add CSS Code For Drop down Menu Navigation

Step1: Go to Blogger Edit Area

Step2: Click on Template

Step3: Click on Customize

Step4: Select Advance Setting

Step5: Select Add Css

Step6: Copy and Past the Following Code

Step7: Click on Apply to Blog

/* Styles the first link in your menu */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}

/* Styles the overall navigation bar */
.tabs-inner .widget ul {
background: #7B68EE;
border: none;
text-align:left;
}
/* Styles the individual links */
.tabs-inner .widget li a {
font: 17px Arvo;
border: none;
color: #ffffff;
}
/* Styles the links when hovered over */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color:#ffffff;
background-color: #000000;
text-decoration: none;
}

#navigationbar {
width: 100%; /* change the width of the navigation bar */
height: 40px; /* change the height of the navigation bar */
}

#navigationcss {
margin: 0 auto;
padding: 0;
}

#navigationcss ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}

#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #ffffff; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 30px; /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}

#navigationcss li a:hover, #navigationcss li a:active {
color: #FF69B4 ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 30px; /* make sure these are the same as the section above! */
}

#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background:#DC143C; /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* similar to above, change for the spacing around the links */
}

#navigationcss li li a:hover, #navigationcss li li a:active {
background: #FFFF00; /* change the background color of drop down items on hover */
color: #DC143C; /* change the color of drop down links on hover */
padding: 7px 10px; /* keep these the same as the above section */
}

#navigationcss li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}

#navigationcss li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
}

#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul {
left: auto;

}

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;

}

*****************End**************************

Now Your Can Add where you need to add Page link area you add Links

Please Watch Our Video Below You Can Understand Easy