The previous drop down menu was not able to be converted to "drop-right" menu. This is used instead:
Such method is important as it is widely used nowadays. It's heavily used in facebook if one hasn't noticed it yet. Although it is not exactly the same, but it is all about using the CSS with the <UL>. What's next? Flip left/right image like iphone trick? I have codes with me but I haven't compiled it up yet. Stay tuned?
Read More »
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
#menu {width: 100px; background: #eee;}
#menu ul {list-style: none; margin: 0; padding: 0;}
#menu li {position: relative;}
#menu ul ul {position: absolute; top: 0; left: 100%; width: 100%;}
#menu ul ul {display: none;}
#menu ul li:hover ul {display: block;}
.butlook {display: block; border-width: 1px; border-style: solid; border-color: #ddd; margin: 0; padding: 3px 3px; font-size: 12px; font-family: tahoma;}
</style>
<body>
<div id="menu">
<ul>
<li class="butlook">Menu 1
<ul>
<li class="butlook">Menu 1 Item 1
<li class="butlook">Menu 1 Item 2
</ul>
</li>
</ul>
<ul>
<li class="butlook">Menu 2
<ul>
<li class="butlook">Menu 2 Item A
<li class="butlook">Menu 2 Item B
</ul>
</li>
</ul>
</div>
</body>
Such method is important as it is widely used nowadays. It's heavily used in facebook if one hasn't noticed it yet. Although it is not exactly the same, but it is all about using the CSS with the <UL>. What's next? Flip left/right image like iphone trick? I have codes with me but I haven't compiled it up yet. Stay tuned?
