JSFiddle - React, Tailwind, and code Playground

by Angelo Rogério Rubin

HTML

<ul id="nav">
    <li><a href="index.html">Home</a></li>
    <li class="submenu"><a href="#" class="bullet">Portfólio</a>
        <ul>
            <li><a href="sites.html">Sites</a></li>
            <li class="submenu"><a href="#" class="bullet">Interfaces</a>
                <ul>
                    <li><a href="graficas.html">Gráficas</a></li>
                    <li><a href="digitais.html">Digitais</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="quemsomos.html">Quem Somos</a></li>
    <li><a href="contato.html">Contato</a></li>
</ul>

CSS

#nav, #nav ul {     width: 70em;     list-style: none;     font: bold 12px Verdana, Arial, Helvetica, sans-serif;     padding: 0;     margin: 0;  } #nav li {     float: left;  } #nav a {     display: block;     width: 10em;     height: 2em;     line-height: 2;     text-align: center;     text-decoration: none;     background-color: #69c; /* IE precisa desta declaração */     color: #fff;     border: 1px solid #ccc;     border-width: 0 1px 1px  } #nav a:hover {     text-decoration: none;     background: #c7daec;     color:#69c;  } #nav a.bullet {     background:#69c url(bullet.gif) no-repeat right;  } #nav a.bullet:hover {     background: #c7daec url(bullet-over.gif) no-repeat right;  } #nav li ul {     position: absolute;     left: -1000em;     width: 10em;     margin: 0;  } #nav ul ul {     margin: -2.1em 0 0 10.1em;  } #nav li:hover ul ul, #nav li.over ul ul {     left: -1000em;  } #nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {     left: auto; }

JavaScript

var dropdown_intervalId; var dropdown_ulId = (!dropdown_ulId) ? 'nav' : dropdown_ulId; var dropdown_delay = (!dropdown_delay) ? 0 : dropdown_delay;  function dropdown_init() {  try  {   var as = document.getElementById(dropdown_ulId).getElementsByTagName('a');    for (var a = 0; a < as.length; a++)   {    as[a].onfocus = function() { dropdown_expand(this) }    as[a].onmouseover = function() { dropdown_expand(this) }    as[a].onblur = function() { dropdown_colapse(dropdown_delay) }    as[a].onmouseout = function() { dropdown_colapse(dropdown_delay) }   }    dropdown_colapse(0);   } catch(e){}  }  function dropdown_expand(caller) {  try  {   clearInterval(dropdown_intervalId);    var uls = caller.parentNode.parentNode.getElementsByTagName('ul');    for (var ul = 0; ul < uls.length; ul++)    uls[ul].style.left = "-1000em";    caller.parentNode.getElementsByTagName('ul')[0].style.left = "auto";   } catch(e){}  }  function dropdown_colapse(milliseconds) {  try  {   clearInterval(dropdown_intervalId);    dropdown_intervalId = setInterval(function()   {    var uls = document.getElementById(dropdown_ulId).getElementsByTagName('ul');     for (var ul = 0; ul < uls.length; ul++)     uls[ul].style.left = "-1000em";     clearInterval(dropdown_intervalId);    }, milliseconds, null);   } catch(e){}  }  window.onload = dropdown_init;