Menu Multi Level Drop Down For Blogger Wordpress

• Menu
• LINK2
• LINK3
• Link4
• LINK5

• LINK2 ITEM 1
• LINK2 ITEM 2
  
  • LINK2 ITEM 2.1
  • LINK2 ITEM 2.2
  
  
• LINK2 ITEM 3
  
  • LINK2 ITEM 3.1
  
  
• LINK2 ITEM 4

• LINK3 ITEM 1
• LINK3 ITEM 2
• LINK3 ITEM 3
  
  • LINK3 ITEM 3.1
  • LINK3 ITEM 3.2
  • LINK3 ITEM 3.3
  • LINK3 ITEM 3.4
• LINK3 ITEM 4
• LINK3 ITEM 5
  
  • LINK3 ITEM 5.1
  • LINK3 ITEM 5.2
    
    • LINK3 ITEM 5.2 1
    • LINK3 ITEM 5.2 2
    • LINK3 ITEM 5.2 3
• LINK3 ITEM 6

• LINK5 ITEM 1
• LINK5 ITEM 2
• LINK5 ITEM 3
• LINK5 ITEM 4
• LINK5 ITEM 5

Tanpa panjang lebar saya jelaskan tentang menu ini mari kita ikuti tutorial selanjutnya.
Bagaimana tertarik untuk memasang pada blog sobat?
Untuk memasang menu ini sobat ga perlu mengedit HTML tapi cukup pastekan saja kode di bawah ini pada gadget sobat.

<script src=http://mybloggertricks.googlecode.com/files/dropdownddlevel.js type=text/javascript></script>
<style>
/* ######### Drop Down Menu by www.MyBloggerTricks.com ######### */

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141; overflow: hidden;
width: 100%;
}
.mattblackmenu li{
display: inline;
margin: 0;
}
.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}
.mattblackmenu li a:visited{
color: white;
}
.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
}
.mattblackmenu a.selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}
</style>

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#" rel="ddsubmenu1">LINK2</a></li>
<li><a href="#" rel="ddsubmenu2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenu3">LINK5</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<ul class=ddsubmenustyle id=ddsubmenu1>
<li><a href=#>LINK2 ITEM 1</a></li>
<li><a href=#>LINK2 ITEM 2</a>
  <ul>
  <li><a href=#>LINK2 ITEM 2.1</a></li>
  <li><a href=#>LINK2 ITEM 2.2</a></li>
  </ul>
</li>
<li><a href=#>LINK2 ITEM 3</a>
  <ul>
  <li><a href=#>LINK2 ITEM 3.1</a></li>

    </ul>
</li>

<li><a href=#>LINK2 ITEM 4</a></li>
</ul>

<ul class=ddsubmenustyle id=ddsubmenu2>
<li><a href=#>LINK3 ITEM 1</a></li>
<li><a href=#>LINK3 ITEM 2</a></li>
<li><a href=#>LINK3 ITEM 3</a>
  <ul>
  <li><a href=#>LINK3 ITEM 3.1</a></li>
<li><a href=#>LINK3 ITEM 3.2</a></li>
  <li><a href=#>LINK3 ITEM 3.3</a></li>
  <li><a href=#>LINK3 ITEM 3.4</a></li>
  </ul>
</li>
<li><a href=#>LINK3 ITEM 4</a></li>
<li><a href=#>LINK3 ITEM 5</a>
  <ul>
  <li><a href=#>LINK3 ITEM 5.1</a></li>
  <li><a href=#>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href=#>LINK3 ITEM 5.2 1</a></li>
    <li><a href=#>LINK3 ITEM 5.2 2</a></li>
    <li><a href=#>LINK3 ITEM 5.2 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href=#>LINK3 ITEM 6</a></li>
</ul>

<ul class=ddsubmenustyle id=ddsubmenu3>
<li><a href=#>LINK5 ITEM 1</a></li>
<li><a href=#>LINK5 ITEM 2</a></li>
<li><a href=#>LINK5 ITEM 3</a></li>
<li><a href=#>LINK5 ITEM 4</a></li>
<li><a href=#>LINK5 ITEM 5</a></li>
</ul>

- Setelah itu simpanlah gadget sobat dan lihat hasilnya

Untuk memodifikasi silakkan sobat utak-atik kodenya agar tampilannya lebih menarik.

Selamat mencoba dan salam blogger !!!