JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ol>
        <li style='float:left;'>
            <a href='#'>Home</a>
        </li>
        <li>
            <a href='#'>D</a>
            <ol>
                <li>
                    <a href='#'>list item</a>
                </li>
            </ol>
        </li>
        <div class='clear'></div>
    </ol>
</nav>

CSS

body{
    margin:0;
    padding:0;
}
nav{
    position:fixed;
    background:#333333;
    width:100%;
    max-width:100%;
    max-height:42px;
    height:42px;
}
nav>ol{
    list-style-type:none;
    margin:0px;
    padding:0px;
    width:100%;
    max-width:100%;
}
nav>ol>li{
    float:right;
}
nav>ol>li:hover >ol{display:block;}
nav>ol>li>a{
    display:block;
    padding:12px 2px 12px 12px;
    font-size:24px;
    font-weight:bold;
    text-decoration:none;
    color:#FFFFFF;
}
nav>ol>li>ol{
    list-style-type:none;
    padding:0px;
    margin:0px;
    position:absolute;
    display:none;
    background:#333333;
}
.clear{clear:both;}