JSFiddle - React, Tailwind, and code Playground

HTML

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
        <img src="http://icons.iconarchive.com/icons/gordon-irving/activity-monitor/48/Matrix-icon.png" alt="Smiley face" width="42" height="42">
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
<div id="navigation" style="position: relative; top: -20px;">
    <ul class="top-level">
        <li><a href="#">Home</a>

            <ul class="sub-level">
                <li><a href="#">Home Item1</a>

                </li>
                <li><a href="#">Home Item2</a>

                    <ul class="sub-level">
                        <li><a href="#">Home Item2 Item1</a>

                        </li>
                        <li><a href="#">Home Item2 Item2</a>

                        </li>
                        <li><a href="#">Home Item2 Item3</a>

                        </li>
                        <li><a href="#">Home Item2 Item4</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">Home Item3</a>

                </li>
                <li><a href="#">Home Item4</a>

                </li>
            </ul>
        </li>
        <li><a href="#">About</a>

            <ul class="sub-level">
                <li><a href="#">About Item1</a>

                </li>
                <li><a href="#">About Item2</a>

                </li>
                <li><a href="#">About Item3</a>

                </li>
                <li><a href="#">About Item4</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Contact</a>

        </li>
        <li> <a href="#">FAQ</a>

            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a>

               ...

CSS

div.information_popup_container {
    position: absolute;
    width:0px;
    height:0px;
    /* Position Information */
    /* Appearance Information */
}
div.information_popup_container > div.information {
    /* Position Information */
    /* Appearance Information */
}
div.information_popup_container > div.popup_information {
    position: fixed;
    visibility: hidden;
    /* Position Information */
    /* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

.showme {
    display: none;
}
.showhim:hover .showme {
    display : block;
}
/*
div {display: none;}
div:hover { display: block; }
img:hover + div {display: block;}
*/
 #navigation {
    font-size:0.75em;
    width:150px;
}
#navigation ul {
    margin:0px;
    padding:0px;
}
#navigation li {
    list-style: none;
}
ul.top-level {
    background:#666;
}
ul.top-level li {
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px;
}
#navigation a {
    color: #fff;
    cursor: pointer;
    display:block;
    height:25px;
    line-height: 25px;
    text-indent: 10px;
    text-decoration:none;
    width:100%;
}
#navigation a:hover {
    text-decoration:underline;
}
#navigation li:hover {
    background: #f90;
    position: relative;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}