Samurai Sword and Yin Yang – Wallpaper
Another idea arrive in my mind when I was working on Yin Yang, Ninjitsu wallpaper.
Yin Yang, Ninjitsu Wallpper
This wallpaper doesn’t mean war (fight) between Ninjas and Chinese Martial arts, I just draw random idea on my mind… 
Simple CSS Drop Down Menu
For start up, I’ve decided to provide simple css based drop down menu which is very common and very difficult on the same time because lot of people uses too many unnecessary styles.
Here is CSS code:
/* styles for main level (1st level) */
.cssMenu { background-color:#fbde8e; padding:0 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; *height:25px; /* for ie7 declaring height of the ul to show background */ }
.cssMenu > li { margin-right:20px; padding:5px; display:inline-block; } /* inline-block will bring all li tags in single line */
.cssMenu li { *float:left; } /*for ie7 because it doesn’t support inline-block*/
.cssMenu li a { text-decoration:none; display:inline-block; }
/* styles for 2nd level */
.cssMenu li:hover { position:relative; background-color:#dabe6f; }
.cssMenu ul.level2 { display:none; }
.cssMenu li:hover ul.level2 { display:block; position:absolute; top:24px; left:0; background-color:#dabe6f; width:200px; }
.cssMenu li:hover ul.level2 li { *float:none; } /* ie7 reseting float to none for 2nd level li tag */
.cssMenu li:hover ul.level2 li a { display:block; padding:3px; color:#fff; }
.cssMenu li:hover ul.level2 li a:hover { background-color:#b80f18; }
Here is XHTML code:
<ul class=”cssMenu”>
<li><a href=”#”>menu item 1</a>
<ul class=”level2″>
<li><a href=”#”>2nd level menu item</a></li>
<li><a href=”#”>2nd level menu item</a></li>
<li><a href=”#”>2nd level menu item</a></li>
</ul>
</li>
<li><a href=”#”>menu item 1</a></li>
<li><a href=”#”>menu item 1</a></li>
</ul>
Code snippet is self explanatory however if someone will have any question or confusion you can post it here, as soon as possible I will try my best to get back along with solution.
