JSFiddle - React, Tailwind, and code Playground

HTML

<ul>  
   <li class="newsfeed"><a href="#" title="Home">News Feed</a></li>  
   <li class="profile"><a href="#" title="Profile">Profile</a></li>  
   <li class="setting"><a href="#" title="Setting">Setting</a></li>  
   <li class="logout"><a href="#" title="Logout">Logout</a></li>  
   <li class="report"><a href="#" title="Report">Report Bug</a></li>
   <li class="about"><a href="#" title="About Us">About Us</a>
       <ul>
           <li><a href='#'>Something</a></li>
           <li><a href='#'>Something else</a></li>
       </ul>
    </li>  
</ul>

CSS

ul li{
    display:inline;
    position:relative;
}

ul li ul{
    position:absolute;
    display:none;
}


ul li.clicked ul {
    display:block;
    width:150px;
    left:-45px;
}

ul li.clicked ul li{
    display:block !important;
}

JavaScript

var about = document.getElementsByClassName("about")[0];

about.onclick = function()
{
    if (this.className == "about clicked")
    {
        this.className = "about";
    }else{
        this.className = "about clicked";
    }
}