Navigation Menu

Actually I've posted about this topic before, but I think that isn't the best one, so I try to find the new one, so check it out, how to make it

Click for NavigationMenu :

1. Like usual go to template => Edit HTML => Proceed => Tick on 'Expand Widget Templates'

2. Find this code ====> <div id='content-wrapper'> <==== and after you found that copy the code below above code <div id='content-wrapper'>

<div id='Menumainwrapx'>
<b:section id='NavbarMenux'>
<b:widget id='HTML50' locked='false' title='NavigationMenu' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div> <!-- End Menumainwrapx -->
<div class='clear'/>

2. After that find this code ====> ]]></b:skin> <==== and same with the previous step, copy the code below, above ]]></b:skin> code

#Menumainwrapx {
background:url(http://farm2.static.flickr.com/1046/5118494385_6bed6df208_t.jpg) repeat-x scroll 0 0 #222222;
border-bottom:1px solid #CCCCCC;
height:42px;
margin:0;
padding:0;
}
#NavbarMenux {
width: 950px;
height: 41px;
font-size: 13px;
color:#333333;
margin: 0px;
padding: 0;
font-weight:bold;
font-family:arial;
margin: 0 auto;
}
#NavbarMenuleftx {
width: 950px;
margin: 0;float:left;}
#navx { margin: 0;
padding: 0; }
#navx ul {
float: left;
list-style: none;
margin: 0;
padding: 0; }
#navx li {
list-style: none;
margin: 0px;
padding: 0; }
#navx li a,
#navx li a:link,
#navx li a:visited {
height: 22px;
color: #333333;
display: block;
font-size: 13px;
text-decoration: none;
margin: 0;
padding:10px 13px 9px 13px;
border-right: 1px solid #CFCFCF; }
#navx li a:hover,
#navx li a:active {
color: #333;
margin: 0;
text-decoration: none;
background:#F0F0F0;
}
#navx li li a, #nav li li a:link,
#navx li li a:visited {
background:url(http://farm2.static.flickr.com/1190/5119105082_e113afd892_t.jpg) repeat-x scroll 0 0 #f5f5f5;
min-width: 150px;
color: #333333;
font-size: 14px;
font-weight: normal;
float: none; margin: 0;
padding: 5px 10px;
font-weight:bold;
font-family:arial;
box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.8);
text-align:left;}
#navx li li a:hover,
#navx li li a:active {
background: #F5F5F5;
color: #333;
}
#navx li {
float: left;
padding: 0; }
#navx li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin:0;
padding: 0;
border-top:1px solid #242424;
}
#navx li ul a {
width: 140px; }
#navx li ul ul {
margin: -41.5px 0 0 176px;
border:none;}
#navx li:hover ul ul,
#navx li:hover ul ul ul, #navx li.sfhover ul ul,
#navx li.sfhover ul ul ul {
left: -999em; }
#navx li:hover ul,
#navx li li:hover ul,
#navx li li li:hover ul,
#navx li.sfhover ul,
#navx li li.sfhover ul,
#navx li li li.sfhover ul {
left: auto; }
#navx li:hover,
#navx li.sfhover {
position: static; }

Save your template

3. Now, go to layout, and find 'NavigationMenu' widget => Edit

4. And copy this code on the red square

<div id='navbarmenuleftx'>
<ul id='navx'>


<li><a href='#'><img border='0' src='http://blog.funmx.com/wp-content/themes/amazing/images/home.png' title="Home" style='padding:0px;'/></a></

li>
<li><a href='#'>Labels ↓</a>
<ul>
<li><a href='#'>Tutorial →</a>
<ul>
<li><a href='#'>Blogging</a></li>
<li><a href='#'>Computer</a></li>
<li><a href='#>Game</a></li>
<li><a href='#'>Hacking</a></li></ul>




<li><a href='#'>Software →</a>
<ul>
<li><a href='#'>Full Version</a></li>
<li><a href='#'>Free Version</a></li>
</ul>




<li><a href='#'>Operating System</a></li>
<li><a href='#'>Virus &amp; Antivirus</a></li></li></li></ul></li>




<li><a href='#'>Play Games ↓</a>
<ul>
<li><a href='#'>Cat vs Dog</a></li>
<li><a href='#'>Chess</a></li>
</ul></li>


<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Link Exchange</a></li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Contact Me</a></li>
<li><a href='#'>FREE! Send Message</a></li>


</ul></div>

5. And you may look this when you first take it to your blog without changing anything, just being creative as you can

Good Luck guys ;-)

Notes!

1. Change # with address that you want to link
2. And change the red word with the name of your menu

for example the result or the demo, you can look my blog, or visit Test Blog

Original: Blogger Afif