Light Hover With CSS Horizontal Menu For Blogger ~ YourBloggerTipz

Light Hover With CSS Horizontal Menu For Blogger. This post I will try to give you tips on the menu bloggers . The title that I take is Light Horizontal Hover Menu meaning Menu Horizontal / Horizontal to be shiny as the highlight by the cursor.

To make it please you follow the stages below:

1. Blogger Log Into You
2. Select Design
3. Select Edit HTML
4. Save the following CSS code above </ head>

<style type='text/css'> # Nav { width: 100%; margin-left:-40px; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4Nv_4AjdRuag1FS-nHdyxMzTMpaJziIT0ZQz5r7weOE4mg1o9tvsC_Oy-fS4ug-oSnYmsfUHepmZK_xbF6aixxCGdaip4Ok2ytHiL9wAAkemBASjrHLCZgj-58yqQN6S3fmELFVVJP_s//) repeat-x; }
# Nav li { float: left; display: block; }
# Nav li a { float: left; display: block; padding: 12px 18px 12px 18px; text-transform: uppercase; text-decoration: none; background: url (http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right; color: # ffffff; }
# Nav li a: hover { background: url (http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right-40px; color: # ffffff; text-decoration: none; }
ul # nav li.activee a, ul # nav-cat a {li.current color: # fff; background: url (http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right-80px; }
# Nav li ul { display: none; } </ Style>

5. Now you find the following code:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> </ B: section> </ Div>

6. Save the following code after the code above

<ul id='nav'>
<li class='activee'> <a href='/'> Home </ a> </ li>
<a href=' # 'title='MENU 1'> MENU 1 </ a> </ li>
<a href=' # 'title='MENU 2'> MENU 2 </ a> </ li>
<a href=' # 'title='MENU 3'> MENU 3 </ a> </ li>
<a href=' # 'title='MENU 4'> MENU 4 </ a> </ li>
<a href=' # 'title='MENU 5'> MENU 5 </ a> </ li>
<a href='#' title='MENU 6'> MENU 6 </ a> </ li>
</ Ul>

Description: Please replace the word MENU on the menu are you going to show, do not forget to also fill out a link that will be addressed by your menu.

Example: