You can do something like this:
JavaScript version: - This will work on a phone
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>
JavaScript:
var about = document.getElementsByClassName("about")[0];
about.onclick = function()
{
if (this.className == "about clicked")
{
this.className = "about";
}else{
this.className = "about clicked";
}
}
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;
}