How to Make Mouseover Navigation Menu withh CSS?

If you want add navigation menu with CSS in your blog this is very east to put your blog.Navigation menu is the process of reading, and controlling the movement of a craft or vehicle from one place to another.


Demo: Mouseover Navigation Menu



Step 1 : Log in your Blogger Account



Step 2 : Go To Layout

Step 3 : Edit HTML

Step 4 : Then find HTML and copy blow Code before this " ]]></b:skin> " and Save Template.

<style>
/* menu bar */
#menubar{ /*menu container*/
background-color:#e1e1e1; /*change or delete*/
padding:0;
margin:0;
}

.btnmenu ul{
font: 15px verdana;
padding: 0;
margin: 0;
}

.btnmenu ul li{
list-style: none;
display: inline;
padding:0;
margin:0;
}

.btnmenu ul li a{
padding: 2px 20px; /* 5px top & bottom, 20px L & R */
text-decoration: none;
float: left;
background-color:#e1e1e1; /*graceful degradation for IE*/
color: black;
border: solid #e1e1e1;
border-width: 4px 1px;
/* radius = 1/2 * (font height + top&bottom padding) */
-webkit-border-radius: 9px; /*firefox*/
-moz-border-radius: 9px; /*Safari*/
border-radius: 9px; /*CSS3*/
}

.btnmenu ul li a:hover{
padding:1px 20px 3px 20px; /* shift text 1px up */
background-color: #FFFFFF; /*You Can Change This Color*/
border-style: outset;
}

.btnmenu ul li a:active{
padding:3px 20px 1px 20px; /* shift text 1px down */
border-style: inset;
}

</style>
<div id='menubar'>
<div class='btnmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Link #1</a></li>
<li><a href='#'>Another Link</a></li>
</ul>
</div>
<div style='clear:both;'></div>
</div>

Related Posts by Categories

Customize Template

• How to Add Syntax Highlighting in Blogger Post?
• Yahoo Smileys Emotions Hack in Comment Section
• Customize Footer Section with Three Columns
• Share Your Articles on Google Buzz Another Good Social Nework For Blogger
• Make Visible Your Comments to Your Visitor
• How to add Animated Sexy Social Bookmarks Blogger?
• How to make to Every Blog Post Summaries with Thumbnail?
• Protect Your Blogger Blog From Spam Comments
• Latest Cool Animated Recent Post Widget With Thumbnail For Bloggers
• Interact Your Visitor With Read More Feature
• How to make three Column Layouts in Blogger Template?
• How to add two ads below post title and increase earning?
• How to Install Recent Posts Widget with thumbnails?
• Show HTML/CSS Codes On Coloured Background In Blogger Posts

CSS

• How to Add Syntax Highlighting in Blogger Post?
• 50 CSS Layouts, Visual Effects and Forms Coding
• CSS Tab Navigation Scripts for Bloggers and Web Designers
• Make Visible Your Comments to Your Visitor
• How to make to Every Blog Post Summaries with Thumbnail?
• Compress Your CSS to Increase Fast Loading Speed of Blogger Page
• Latest Cool Animated Recent Post Widget With Thumbnail For Bloggers
• Show HTML/CSS Codes On Coloured Background In Blogger Posts