JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<style type="text/css"> 
    .UCMenu_DDDNMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .UCMenu_DDDNMenu_1 { text-decoration:none; }
    .UCMenu_DDDNMenu_2 {  }
    .UCMenuLower_DDDNMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .UCMenuLower_DDDNMenu_1 { text-decoration:none; }
    .UCMenuLower_DDDNMenu_2 {  }
 
</style>



<div class="AspNet-Menu-Horizontal" id="UCMenu_DDDNMenu">
        <ul class="AspNet-Menu">
            <li class="AspNet-Menu-WithChildren">
                <a href="javascript:__doPostBack('UCMenu$DDDNMenu','bRapportage')" class="AspNet-Menu-Link" title="Rapportage">
                    Rapportage</a>
                <ul>
                    <li class="AspNet-Menu-Leaf">
                        <a href="Admin/ComplaintsReport.aspx" class="AspNet-Menu-Link" title="Klachten opzoeken">
                            Klachten opzoeken</a>
                    </li>
                    <li class="AspNet-Menu-Leaf">
                        <a href="Admin/ReservationsReport.aspx" class="AspNet-Menu-Link" title="Overzicht reserveringen">
                            Overzicht reserveringen</a>
                    </li>
                </ul>
            </li>
            <li class="AspNet-Menu-WithChildren">
                <a href="javascript:__doPostBack('UCMenu$DDDNMenu','bTaken')" class="AspNet-Menu-Link" title="Taken">
                    Taken</a>
                <ul>
                    <li class="AspNet-Menu-Leaf">
                        <a href="Admin/ViewFunds.aspx" class="AspNet-Menu-Link" title="Fondsplanning">
                            Fondsplanning</a>
                    </li>
                    <li class="AspNet-Menu-Leaf">
                        <a href="Admin/ManageNeighbourhood.aspx" class="AspNet-Menu-Link" title="Beheer buurten">
                            Beheer buurten</a>
                    </li>
               ...

CSS

/* Menu upper */
#UCMenu_DDDNMenu .AspNet-Menu-WithChildren{
text-align:left;
font-size:small;
font-weight:bold;
border:1px solid #AFAFAF;
margin-left:5px;
display:block;
text-align:center;
width:160px;
    float:left;
}

#UCMenu_DDDNMenu .AspNet-Menu-WithChildren .AspNet-Menu-Link{
display:block;
background:#DFDFDF;
color:#666;
padding:4px;
}

#UCMenu_DDDNMenu .AspNet-Menu-Link{
padding:4px;
}
#UCMenu_DDDNMenu .AspNet-Menu-Link:hover{
background:#ECD100;
}

#UCMenu_DDDNMenu .AspNet-Menu-WithChildren ul{
text-align:left;
font-size:small;
font-weight:normal;
border:1px solid #AFAFAF;
background:#F5f5f5;
z-index:20000;
margin-top:0;
margin-left:0;
}

#UCMenu_DDDNMenu .AspNet-Menu-WithChildren ul li{
position:relative;
    width:170px;
}

#UCMenu_DDDNMenu .AspNet-Menu-WithChildren ul li a{
text-align:left;
font-size:x-small;
font-weight:normal;
display:block;
padding:4px;
white-space:nowrap;
width:150px;
}

#UCMenu_DDDNMenu .AspNet-Menu-WithChildren ul li a:hover{
background:#F7EDAB;
}