JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta http-equiv="x-ua-compatible" content="IE=8">
    </head>
    
    <body>
        <p>this is a test.</p>
        <button onclick="DisplayInfo();">Click me!</button>
        <div class="browseMenu clearfix">
            <!-- Bof Section 0-->
            <div class="group head0">
                <div class="head">IT Services &amp; Access</div>
                <!-- Bof Level One-->
                <ul class="levelOne">
                    <li><a href="#">Basic IT Access <span>&#9658;</span></a>

                        <!-- Bof Internal
                        Menu-->
                        <div class="internalMenu">
                            <div class="header">
                                 <h2>My Team</h2> &gt; HR for HR
                                <div class="close">X</div>
                            </div>
                            <!-- Bof Level Twos-->
                            <ul class="levelTwo">
                                <li><a href="#">Corporate Finance Systems <span>&#9660;</span></a>

                                    <!-- Bof
                                    levelThree-->
                                    <div class="levelThree">
                                        <div class="header">
                                             <h2>His Team</h2> &gt; HR for HR &gt; HR for HR
                                            <div class="close">X</div>
                                        </div>
                                        <!-- Bof Level Fours-->
                                        <ul class="levelFour">
                                            <li><a href="#">Blah asdimeaw <span>&#9660;</span></a>

                                                <!-- Bof Level Five-->
                                                <ul class="levelFive">
                                                    <li><span>Information</span>

                                  ...

CSS

/*****************
*     General    *
******************/
 .group ul {
    margin: 0;
    padding: 0;
}
.group li {
    border-top: 1px solid #DDD;
    list-style: none;
}
.group li:hover {
}
.group > ul > li > a, .internalMenu > ul > li > a, .levelThree > ul > li > a {
    display: block;
    height: 38px;
    color: #000000;
    font-size: 11px;
    text-decoration: none;
    padding: 4px 20px 4px 5px;
    vertical-align: bottom;
    min-height: 28px;
    position: relative;
}
.internalMenu a, .levelThree a {
    width: 144px;
}
.levelOne li > a span {
    position: absolute;
    right: 5px;
    top: 34%;
    color: #777;
    font-size: 8px;
}
/*****************
*     Header     *
******************/
 .header {
    font-size: 9px;
}
.header h2 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 5px 0 5px 9px;
    font-size: 11px;
    text-decoration: underline;
}
.header .close {
    float: right;
    border: 1px solid #777;
    color: #777;
    cursor: pointer;
    font-family:'Comic Sans MS';
    font-size: 12px;
    line-height: 12px;
    margin: 3px;
    padding: 1px 2px;
}
/****************
*   Levels   *
*****************/
 .levelOne {
    position: relative;
}
.levelTwo li a span, .levelFour li a span {
    display: none;
}
.levelTwo li.active span, .levelFour li.active span {
    display: block;
}
.internalMenu .levelTwo, .levelThree .levelFour, .levelFive {
    float: left;
    width: 170px;
}
/*****************
*    Level One   *
******************/
 .levelOne .internalMenu, .levelOne .levelThree {
    position: absolute;
    left: 155px;
    top: -1px;
    border: 1px solid #777;
    border-right-width: 2px;
    border-bottom-width: 2px;
    display: none;
    /*collapse all sub menus to begin with*/
    z-index: 1;
}
/*****************
*    Level Two   *
******************/
 .internalMenu > ul > li, .levelThree > ul > li {
    float: left;
    border: 1px solid #E5DED8;
    border-right: none;
    border-bottom: none;
   ...

JavaScript

/*
  	 * Author: Rob Reid
  	 * CreateDate: 20-Mar-09
  	 * Description: Little helper function to return details about IE 8 and its various compatibility settings either use as it is
  	 * or incorporate into a browser object. Remember browser sniffing is not the best way to detect user-settings as spoofing is
  	 * very common so use with caution.
  	 */
  	function IEVersion() {
  	    var _n = navigator,
  	        _w = window,
  	        _d = document;
  	    var version = "NA";
  	    var na = _n.userAgent;
  	    var ieDocMode = "NA";
  	    var ie8BrowserMode = "NA";
  	    // Look for msie and make sure its not opera in disguise
  	    if (/msie/i.test(na) && (!_w.opera)) {
  	        // also check for spoofers by checking known IE objects
  	        if (_w.attachEvent && _w.ActiveXObject) {
  	            // Get version displayed in UA although if its IE 8 running in 7 or compat mode it will appear as 7
  	            version = (na.match(/.+ie\s([\d.]+)/i) || [])[1];
  	            // Its IE 8 pretending to be IE 7 or in compat mode              
  	            if (parseInt(version) == 7) {
  	                // documentMode is only supported in IE 8 so we know if its here its really IE 8
  	                if (_d.documentMode) {
  	                    version = 8; //reset? change if you need to
  	                    // IE in Compat mode will mention Trident in the useragent
  	                    if (/trident\/\d/i.test(na)) {
  	                        ie8BrowserMode = "Compat Mode";
  	                        // if it doesn't then its running in IE 7 mode
  	                    } else {
  	                        ie8BrowserMode = "IE 7 Mode";
  	                    }
  	                }
  	            } else if (parseInt(version) == 8) {
  	                // IE 8 will always have documentMode available
  	                if (_d.documentMode) {
  	                    ie8BrowserMode = "IE 8 Mode";
  	                }
  	            }
  	           ...