JSFiddle - React, Tailwind, and code Playground

by jfrej

HTML

<div id="sldn_mnu">
    <ul>
    <li><a href="#">HELLO</a></li>
    <li class="sldn_mnu-drop">
        <a href="#" ><span class="sldn_mnu-label">WORK</span></a>
        <ul>
          <li class="sldn_mnu-subDrop"><a href="#">Item 1.1</a>
            <ul>
              <li><a href="#" >Item 1.1.1</a></li>
              <li><a href="#" >Item 1.1.2</a></li>
            </ul>
          </li>
          <li><a href="#" >Item 1.2</a></li>
          <li><a href="#" >Item 1.3</a></li>
        </ul>
      </li>
      <li><a href="#" >Item 2</a>
        <ul>
          <li><a href="#" >Item 2.1</a></li>
          <li><a href="#" >Item 2.2</a></li>
          <li><a href="#" >Item 2.3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3</a></li>
    </ul>
</div>

CSS

#sldn_mnu {display: block;}
#sldn_mnu ul ul {left:-7000px;}
#sldn_mnu li:hover ul ul {left:-6000px;}

JavaScript

alert($('#sldn_mnu li').hover().find('ul ul').css('left'));

function getStyle(selector) {
    for(var y=0;y<document.styleSheets.length;y++){
        var classes = document.styleSheets[y].rules || document.styleSheets[y].cssRules
        for(var x=0;x<classes.length;x++) {
            if(classes[x].selectorText.match(selector)) {
                    (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
            }
        }
    }
}

getStyle(/sldn_mnu.*hover/);