JSFiddle - React, Tailwind, and code Playground

by Ashish Sharma

HTML

<ul class='menus menu-secondary'>

  <li><a href='http://xeemez.blogspot.in/2013/02/contact-us.html'>Today&#39;s Special</a>
<ul class='children' style='border:3px ridge white'>
<li><a href='http://xeemez.blogspot.in/2013/08/mind-blowing-facts-about-hinduism.html'>卐 Hindu Religion Facts 卐</a></li>
<li><a href='http://xeemez.blogspot.in/2013/08/how-to-gain-wait-slim-geeks-diary.html'>Wait Gain Tips</a></li>
<li><a href='http://xeemez.blogspot.in/2013/07/refresh.html'>Refresh Or Not</a></li>
</ul>
</li>
<li><a href='http://xeemez.blogspot.in/2013/02/contact-us.html'>Contact Us</a>
  <ul class='children' style='border:3px ridge white'>
<li><a href='http://xeemez.blogspot.in/2013/02/contact-us.html'>Contact Details</a></li>
<li><a href='http://xeemez.blogspot.in/2013/02/privacy-policy-for-wwwxeemedblogspotcom.html'>Privacy Policy</a></li>
<li><a href='http://xeemez.blogspot.in/2013/02/about-site.html'>About Us</a></li>
</ul>
</li>

</ul>

CSS

.menus{list-style:none;line-height:1.0}
.menus ul{position:absolute;top:-999em;width:200px}
.menus ul li{width:100%}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
a{outline:0;background:url(http://4.bp.blogspot.com/-NKEyN5R4vOo/UOZiqeP2QyI/AAAAAAAADNA/iUIKAOa77Yg/s1600/menu-primary-bg.png) left -140px repeat-x}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{padding:14px 15px 14px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px/12px Arial,Helvetica,Sans-serif}
.menu-secondary li li a{background:#373737;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}