JSFiddle - React, Tailwind, and code Playground
by karinafoto
HTML
<ul id='nav'>
<li><a href='http://karinafotocollection.blogspot.com/' title='home'>Home</a> </li>
<li><a href='http://karinafotocollection.blogspot.com/'>Join Us</a>
<ul>
<li><a href=’ ‘>Blog ku</a> </li>
<li><a href=’ ‘>Blog tutorial </a> </li>
</ul> </li>
<li><a href='#' title='other'>Modivikasi blog</a>
<ul>
<li>
<a href=’#’>mouse over</a></li>
<li>
<a href=’#’>menu horisontal</a></li>
<li>
<a href=’#’>menu vertikal</a></li>
</ul>
<li><a href='#' title='other'>PHOTOSHOP</a>
<ul>
<li>
<a href=’#’>SOFWER</a></li>
<li>
<a href=’#’>TUTORIAL</a></li>
<li>
<a href=’#’>BRUSHES</a></li>
</ul>
<li><a href='#' title='other'>WALPAPER</a>
<ul>
<li>
<a href=’#’>SELEBRITIS</a></li>
<li>
<a href=’#’>FOOTBALL</a></li>
</ul>
<li><a href='#' title='other'>DOWNLOAD FREE MP3</a>
<ul>
<li>
<a href=’#’>WAB SITE 1</a></li>
<li>
<a href=’#’>WAB SITE 2</a></li>
<li>
<a href=’#’>WAB SITE 3</a></li>
<li>
<a href=’#’>WAB SITE 4</a></li>
<li>
<a href=’#’>WAB SITE 5</a></li>
<li>
<a href=’#’>WAB SITE</a></li>
</ul>
<li><a href='#' title='other'>BANNER SAHABAT</a></li>
</li></li></li></li></ul>CSS
/*modivikasi menu=>http://karinafotocollection.blogspot.com*/
#NavbarMenu{background:#fffff; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; text-transform:capitalize border-bottom:1px solid #666;}
#NavbarMenu{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:0px 0px 0px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:red; display:block;border:1px solid red; text-transform:capitalize; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#fff url(http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/CorporateButtonBackgroundOver.gif) repeat top left; color:#088A08; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#fff url(http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/baquette_beige_diamond_lip_color.jpg) repeat top left; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia,;}
#nav li li a:hover, #nav li li a:active{background:#fff url(http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/search.gif) repeat top left; color:black; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul*ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li...