silakan copy scriptnya di salin ke html
<<!-start dropdownmenu by Tutes Inside->
<ul id='dropdownmenu'>
<li class="active"><a href='#'>Home</a></li>
<li class="sub"><a href='#'>Menu1</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu2</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
</ul>
<!-end dropdownmenu->
tambahkan di css berikut ini :
/*--Dropdownmenu Styling by Tutes Inside--*/
#dropdownmenu{
margin:0px 0 0 -30px;
padding:0px 0px 0px 0px;
width: 1050px; /*Set Width of Blog Menu*/
font:$(tabs.font); /*Change Font Type,Size,Etc*/
color:$(tabs.text.color); /*Change Font Color*/
}
#dropdownmenu ul{
background:$(tabs.background.color)$(tabs.background.gradient)
repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
height:20px; /*Height*/
list-style:none;
margin:0px;
padding:0px;
}
#dropdownmenu li{
float:left;
padding:0px;
}
#dropdownmenu li a{
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
display:block;
margin:0px;
font:$(tabs.font); /*Change Font Type,Size,Etc*/
text-decoration:none;
}
#dropdownmenu > ul > li > a{
color:$(tabs.text.color); /*Change Font Color*/
}
#dropdownmenu ul ul a{
color:$(tabs.text.color); /*Change Font Size*/
}
#dropdownmenu li > a:hover, #dropdownmenu ul li:hover{
color:$(tabs.selected.text.color); /*Change Font Color On Hover*/
background-color:$(tabs.selected.background.color); /*Change Font BG Color*/
text-decoration:none;
}
#dropdownmenu li ul {
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:100px; /*Change Width of Drop Down Menu*/
z-index:9999;
}
#dropdownmenu li:hover ul{
display:block;
}
#dropdownmenu li li {
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none;/*Change Menu BG*/
display:block;
float:none;
margin:0px;
padding:0px;
width:200px; /*Change Width of DropDown Menu*/
}
#dropdownmenu li:hover li a{
background:$(tabs.selected.background.color);/*Change BG of Link Hover*/
}
#dropdownmenu li ul a{
display:block;
height:auto;
margin:0px;
padding:10px;
text-align:left;
}
#dropdownmenu li ul a:hover, #dropdownmenu li ul li:hover > a{
color:$(tabs.selected.text.color);/*Change Text Color On Hover*/
background-color:$(tabs.selected.background.color);/*Change BG on Hover*/
border:0px;
text-decoration:none;
}
