JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
<title>Menu Test</title>

<!-- base href="http://www.socialinformation.ch/" -->
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-11 Ted Kulp. All rights reserved.">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="author" content="">
 
<link rel="icon" type="image/png" href="">
<link rel="stylesheet" type="text/css" href="menu_fichiers/stylesheet_combined_adc6fdfb134df95627fe896e770b4dfe.css">

</head><body>

<!-- start header -->
<div id="global-container1">
  <div id="global-container2">
    <a id="header" href="#" title="Title">
      <span class="leftTitle">
        <span class="white">Title</span> Title
      </span>
      <span class="rightTitle">Title</span>
      <span class="leftTitleSmall">Title</span>
    </a>

    <div id="main-container">
      <div id="menu-container">
         
<ul id="menu">

      <li class="menuactive"><span class="menuactive" href="#">Menu 1</span>

<ul class="menulvl2">


<li><a href="#">Menu 1.1</a>

</li>


<li><a href="#">Menu 1.2</a>

</li>


<li><a href="#">Menu 1.3</a>

</li></ul>
</li>


<li><span>Menu 2</span>

<ul class="menulvl2">


<li><a href="#">Menu 2.1</a>

</li>


<li><a href="#">Menu 2.2</a>

</li>


<li><a href="#">Menu 2.3</a>

</li></ul>
</li>


<li><a href="#">Menu 3</a>

</li>


<li><a href="#">Menu 4</a>

</li>


<li><a href="#">Menu 5</a>

</li>
</ul>

        <div id="menu-enlarged"><div></div></div>

      </div>
      <div id="contenu">
        <h1>TITLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque elit, vel venenatis sem. Etiam id nibh a dui laoreet porta vel ac massa. Fusce lacinia nibh sed lacus dictum consectetur. Integer cursus elementum tortor...

CSS

/* Stylesheet: SIThemeReset Modified On 2012-01-26 19:00:30 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, /*strong,*/ sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* Stylesheet: SITheme Modified On 2012-03-06 18:23:36 */
/*
*/

html
{
    height: 100%;
    background-color: #ebebeb;
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", arial;
}

body
{
    height: 100%;
    padding: 0px;
    text-align: justify;
}

div#global-container1
{
    min-width: 1000px;
    min-height: 100%;
    background: url(../../uploads/SITheme/images/bg.png) repeat-x bottom;
}

div#global-container2
{
    background: url(../../uploads/SITheme/images/bg_leftSide.png) no-repeat 21px 103px;
}

a#header
{
    display: block;
    text-decoration: none;
    height: 90px;    
    background: url(../../uploads/SITheme/images/orangeCircle.png) no-repeat 37px 15px;
    color: #000000;
    width: 1000px;
}

a#header span.leftTitle
{
    font-size: 21.67px;
...

JavaScript

//emulate :hover css attribute for iOS (iPad, iPhone)

window.onload = function() {
    var myLinks = document.getElementById("menu").getElementsByTagName("li");
    for(var i = 0; i < myLinks.length; i++){
        myLinks[i].addEventListener('touchstart', function(){this.className = "sfhover";}, false);
        myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
    }
}