JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<div id='cssmenu'>
<ul>
   <li class='Stream Portal'><a href="./home.html" target="frame" onclick="window.frame1.location.href='./homepageinfo.html';return true;">Home</a></li>
   <li class='has-sub'><a href="./home.html" target="frame" onclick="window.frame1.location.href='./homepageinfo.html';return true;">TV</a>
      <ul>
         <li><a href="./justintv.html" target="frame" onclick="window.frame1.location.href='./justintvinfo.html';return true;">Justin</a></li>
         <li><a href="http://lmtv.us/#" target="frame" onclick="window.frame1.location.href='./lminfo.html';return true;">LM</a></li>
         <li><a href="http://www.mtv.com/ontv/" target="frame" onclick="window.frame1.location.href='./mtvinfo.html';return true;">MTV</a></li>
         <li><a href="http://www.spike.com/episodes" target="frame" onclick="window.frame1.location.href='./spikeinfo.html';return true;">Spike</a></li>
         <li><a href="http://www.cartoon-world.tv/cartoon-list/" target="frame" onclick="window.frame1.location.href='./tooninfo.html';return true;">Toon</a></li>
         <li><a href="./tubtub.html" target="frame" onclick="window.frame1.location.href='./tubtubinfo.html';return true;">TubTub</a></li>
         <li class='last'><a href="http://veetle.com/index.php/listing/index/shows" target="frame" onclick="window.frame1.location.href='./veetleinfo.html';return true;">Veetle</a></li>


      </ul>
   </li>

   <li class='has-sub'><a href="./home.html" target="frame" onclick="window.frame1.location.href='./homepageinfo.html';return true;">Movies</a>
      <ul>
         <li><a href="./moviesearchframe.html" target="frame" onclick="window.frame1.location.href='./moviesearchinfo.html';return true;">Movie Search</a></li>
         <li><a href="http://topdocumentaryfilms.com/" target="frame" onclick="window.frame1.location.href='./documentariesinfo.html';return true;">Documentaries</a></li>
         <li><a href="http://freeonlinemoviestream.co/" target="frame"...

CSS

#cssmenu {position:fixed;top:0px}
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  color: #FF0000;
  display: inline-block;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 35px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 #000000;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li.active a {
  background: #000000 url(grad_dark.png) repeat-x left bottom;
  background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #000000 0%, #000000 100%);
  background: -o-linear-gradient(top, #000000 0%, #000000 100%);
  background: -ms-linear-gradient(top, #000000 0%, #000000 100%);
  background: linear-gradient(to bottom, #000000 0%, #000000 100%);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
  box-shadow: inset 0 0 10px #000000, inset 0 10px 10px #000000;
  -moz-box-shadow: inset 0 0 10px #000000, inset 0 10px 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000, inset 0 10px 10px #000000;
  filter: none;
}
#cssmenu > ul > li.active a:hover {
  background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #000000 0%, #000000 100%);
  background: -o-linear-gradient(top, #000000 0%, #000000 100%);
  background: -ms-linear-gradient(top, #000000 0%, #000000 100%);
  background: linear-gradient(to bottom, #000000 0%, #000000 100%);
  filter:...