Create a Blog | Create a Successful Website | AdSense | Get Traffic | Learn SEO  
 SEO | Webmaster Forum | Google AdSense Training | Blog | Part Time Jobs | Advertise
HTML Editor | Hex Color Code Generator | Blogger XML Parser | SEO Tools | Google Page Rank Checker | WordPress Tutorial
0

HTML Hover Menu

HTML Hover Menu add new dimension to your Search Engine Optimization of your website. Either you can add this HTML Hover Menu in your Post(s) or you can just add this on your Sidebar widgets area.

With the help of HTML Hover menu your post(s) looks attractive and also your site visitors have more options to choose from the list of menu. They can easily select the topic from the list. You can add color also to your menu. You can change Font Color, Hover Color and so on.

Now you have to just two things. First one you have to paste the following code in the CSS page that is .style.css (if you are using WordPress) if you are using HTML Template for your website then you to copy and paste the below code in CSS Page.

<style>

#coolmenu{

width:200px

}

#coolmenu a{

font: bold 13px Verdana;

padding: 2px 4px;

display: block;

color: black;

text-decoration: none;

border-bottom: 0px solid black;

}

#coolmenu a:hover{

background-color: black;

color: white;

}

</style>

After add the above codes in your CSS Style sheet. Now come to the HTML Section of your website.  Before proceeding further I want to clarify two things here friends. The actual menu width is 100% of your post area width. See the below picture for more information.

HTML Hover Menu (Full Width)

HTML Hover Menu (Full Width)

For the above horizontal HTML Hover menu you just place this below code in your HTML Section of your website.

<div id=”coolmenu”><a href=”http://www.way2onlinejobs.com”>Create
a Successful Website</a>
<a href=”www.way2onlinejobs.com/…/google-adsense-training-seminars.html”>AdSense
Training</a><a href=”http://www.way2onlinejobs.com/google-adsense-class.html”>AdSense
Approval</a>

<a href=”http://www.way2onlinejobs.com/html/html-scroll-box.html”>HTML
Scroll Box</a>

<a href=”http://www.way2onlinejobs.com/income/site-build-it-google-adsense.html”>Sitebuild
It</a></div>

Now, if you want to reduce the width of the menu then you can use table or something related to that to reduce the width of the menu.

Print Friendly
Filed in: HTML Tags: ,

Related Posts

Bookmark and Promote!

Leave a Reply

Submit Comment

© 2014 . All rights reserved. XHTML / CSS Valid. Way2onlinejobs.com by +Perambur Kumar
Proudly designed by Perambur Kumar.