HTML code:
Example Source Code
<div id= "NAV" >
<ul>
<li class= "menu2″onmouseover=" This.classname= ' menu1′ ' onmouseout= ' this.classname= ' menu2′ ' > My homepage
<div class= "List" >
<a href= "http://www.onlygrape.com/" > Grape </a><br/>
<a href= "#" > My home </a><br/>
<a href= "#" > My log </a><br/>
<a href= "#" > My log </a><br/>
<a href= "#" > My album </a><br/>
<a href= "#" > My collection </a><br/>
</div>
</li>
<li class= "menu2″onmouseover=" This.classname= ' menu1′ ' onmouseout= ' this.classname= ' menu2′ ' > Community Circle
<div class= "List" >
<a href= "http://www.onlygrape.com/" > Grape </a><br/>
<a href= "#" > My home </a><br/>
<a href= "#" > My log </a><br/>
<a href= "#" > My album </a><br/>
<a href= "#" > My collection </a><br/>
</div>
</li>
<li class= "menu2″onmouseover=" This.classname= ' menu1′ ' onmouseout= ' this.classname= ' menu2′ ' > My SMS
<div class= "List" >
<a href= "http://www.onlygrape.com/" > Grape </a><br/>
<a href= "#" > My album </a><br/>
<a href= "#" > My collection </a><br/>
</div>
</li>
<li class= "menu2″onmouseover=" This.classname= ' menu1′ ' onmouseout= ' this.classname= ' menu2′ ' > account Management
<div class= "List" >
<a href= "http://www.onlygrape.com/" > Grape </a><br/>
<a href= "#" > My home </a><br/>
<a href= "#" > My log </a><br/>
<a href= "#" > My album </a><br/>
<a href= "#" > My collection </a><br/>
<a href= "#" > My log </a><br/>
<a href= "#" > My album </a><br/>
<a href= "#" > My collection </a><br/>
</div>
</li>
</ul>
</div>
You pay special attention to HTML similar to the following code. This is the key to the transformation.
Example Source Code
class=”menu2″
onMouseOver=”this.className=’menu1′”
onMouseOut=”this.className=’menu2′”