JSFiddle - React, Tailwind, and code Playground

HTML

<div role="navigation" id="access">
                                 <div class="skip-link screen-reader-text"><a title="Springe zum Inhalt" href="#content">Springe zum Inhalt</a></div>
                                <div class="menu-header"><ul class="menu" id="menu-skb-main-menue"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-75 current_page_item menu-item-101" id="menu-item-101"><a href="http://studiokruckerbates.fokminusyou.com/">News</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110" id="menu-item-110"><a href="http://studiokruckerbates.fokminusyou.com/?page_id=5">Studio</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111" id="menu-item-111"><a href="http://studiokruckerbates.fokminusyou.com/?page_id=8">Studio Profile</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102" id="menu-item-102"><a href="http://studiokruckerbates.fokminusyou.com/?page_id=10">Professors</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113" id="menu-item-113"><a href="http://studiokruckerbates.fokminusyou.com/?page_id=13">Team</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114" id="menu-item-114"><a href="http://studiokruckerbates.fokminusyou.com/?page_id=15">Assistants</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116" id="menu-item-116"><a href="http://studiokruckerbates.fokminusyou.com/?page_id=17">Secretary</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115" id="menu-item-115"><a href="http://studiokruckerbates.fokminusyou.com/?page_id=19">Junior Assistants</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"...

CSS

#access {
    border-bottom: 1px dashed #000000;
    border-top: 1px dashed #000000;
    float: left;
    margin: 0 auto;
    width: 100%;
    position: relative;   
}
#access .menu-header, div.menu {
    font-size: 11px;
    width: 444px;
}
#access .menu-header ul, div.menu ul {
    list-style: none outside none;
    margin: 0;
}
#access .menu-header li, div.menu li {
  display: inline-block;
}
#access a {
    color: #000000;
    line-height: 16px;
    padding: 0 10px;
    text-decoration: none;
    display: inline-block;
}
#access ul li ul {
    border-bottom: 1px dashed #000000;
    display: none;
    position: absolute;
    width: 100%;
    left:0;
}
#access ul li ul li {
    display: inline;
    width: 100px;
}
#access ul li ul a {
    float: left;
    line-height: 16px;
    text-align: center;
    width: 90px;
}
#access ul li ul li ul {
    border-bottom: 1px dashed #000000;
    padding-top: 21px;
}
#access ul li ul li ul li {
    width: 150px;
}
#access ul ul ul a {
    width: 150px;
}
#access li:hover > a, #access ul ul *:hover > a {
    color: #E1DDD1;
}
#access ul li:hover > ul {
    display: block;
}
#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
    color: #000000;
}
* html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover {
    color: #FFFFFF;
}