JSFiddle - React, Tailwind, and code Playground

by mcgarriers

HTML

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>CSS | IE7 Issue</title>

</head>

<body id="top">

    <div class="row">
      <div class="col gu12 navarea">
        <div id="nav3">
        <ul id="menu-main-menu" class="avia_mega sf-menu" style="background:red">  
              <li><a href="/" id="home" class="home "><span></span>Home</a></li> 
              <li><a href="#" id="programme-options" class=""><span style="background:yellow"></span>Tester</a>                    
                <ul>           
                  <li><a href="#">Test Link</a></li>  
                  <li><a href="#">Test Link</a></li> 
                  <li><a href="#">Test Link</a></li> 
                  <li><a href="#">Test Link</a></li> 
                  <li><a href="#">Test Link</a></li> 
                </ul>
              </li>
        </ul> 
          
        </div>
      </div>

    </div>
    <div class="row">
      <div class="col gu12">
        <img src="http://indiawebsearch.com/files/image/thumb_googlelogo.jpg" class="main-img" style="float:left" />            
      </div>
    </div>
    
</body>

</html>

CSS

.row {position:relative; margin-left:-10px;}
.gu12 .row {width: 960px;}

li {padding:0;margin:0}
a {padding:0;margin:0}

.col {padding-left:10px; float:left; position:relative;}
.gu12{width: 950px;}
    
#nav3 ul {float:left;}
#nav3 ul li {list-style-type:none;float:left}
#nav3 ul li a {display:block;line-height:40px;}

#nav3 {padding-left:1px;height:40px}
#nav3 a span {height:40px;padding:0;margin:0;margin-top:0px!important;position: absolute; width 100%;height:100%}


a#programme-options {height:40px;width:177px;position: relative;}
a#programme-options span {background-position:-159px 0px;position: absolute;width: 100%;height: 100%;}   
a#programme-options span:hover {background-position:-159px -160px!important}
a#programme-options.active span, a#programme-options:active {height:40px;width:177px;margin-top:0px!important;background-position:-159px -200px}

#nav {padding-top:15px;padding-bottom:0px;}
#nav {margin-top:45px;padding-top:0px;padding-bottom:0px;}
#nav ul {float:left;width:950px;}
#nav ul li {list-style-type:none;float:left}
#nav ul li a {display:block;line-height:40px;}

#top .avia_mega ul ul li, #top .avia_mega >li >ul li{
color:#777;
background-image: url(menu_arrow.png);
background-position: -20px -11px;
*background-position: -50px -51px; /*ie7 pseudo fix of bg images*/
background-repeat: no-repeat;
}
#top .avia_mega{height:40px; line-height:40px; padding:0; left:1px; bottom:0px; position:absolute; z-index:100}
.avia_mega, .avia_mega ul{margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:40px; z-index:5}
#top .avia_mega li{float:left; position:relative; z-index:20; margin-left:0}
#top .avia_mega ul a:hover{text-decoration:underline}
#top .avia_mega div ul{line-height:21px}
.avia_mega1, .avia_mega2, .avia_mega3, .avia_mega4, .avia_mega5{position:absolute; display:none; top:0px; left:0; padding:8px}
#top .avia_mega div ul li{width:162px; padding:15px}

#top .avia_mega > li > ul, #top .avia_mega > li...