JSFiddle - React, Tailwind, and code Playground

HTML

<span id="main_menu">
    <span>
        <a href="#">Page 1</a>
    </span>
    <span>
        <a href="#">Page 2</a>
        <span>
            <span>
                <a href="#-history">Sub Page 1</a>
            </span>
            <span>
                <a href="#">Order Savings</a>
            </span>
        </span>
    </span>    
    <span>
        <a href="#">Page 3</a>
    </span>
</span>

CSS

#main_menu{
    background: #000;
    display: inline-block;
    padding: 10px;
}

#main_menu > span{
    display: inline-block;
    vertical-align: top;
}

#main_menu > span:not(:first-child)::before{
    content: "|";
    color: #FFF;
    font-size: 20px;    
    font-weight: 700;
    margin: 0 6px;
    vertical-align: top;
}

#main_menu a{
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

#main_menu > span > span{
    display: none;
}

#main_menu > span:hover > span,
#main_menu > a:focus + span > span,
#main_menu > span > span:hover,
#main_menu > span > a:focus + span{
    display: block;
    padding-top: 1em;
    position: absolute;
    z-index: 1000;
}
#main_menu > span > span > span > a{
    background: none repeat scroll 0 0 #000;
    border: 1px solid #fff;
    display: block;
    padding: 5px 7px;
}
#main_menu > span > span > span > a:hover,
#main_menu > span > span > span > a:focus {
    border-color: #00cc00;
    color: #00aa00;
}