How to include the list items in tool bar menu?

Question

I have installed the tool bar on ios phone gap. Now I want to add list of item under "More" tool bar. How can I include list on click of "More" tool bar. So on click of "More" the list should popup.

My tool bar event code is as follows,

var tabBar = cordova.require("cordova/plugin/iOSTabBar");
tabBar.init();
tabBar.create({selectedImageTintColorRgba: "255,40,0,255"});
tabBar.createItem("More", "More", "tabButton:More", {
onSelect: function() {
     // Here I want to add the list
 }
});
tabBar.createItem("About us", "About us", "/www/pixeden-tab-bar-icons-ios-7/line__0000s_0126_info.png", {
onSelect: function() {
      aboutus();
  }
 })

 tabBar.show();
  tabBar.showItems("About us", "More");
  window.addEventListener("resize", function() { tabBar.resize() }, false);

I need to include the list as follows,

<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>  
</ul>

Answer 1

You can do something like this:

JavaScript version: - This will work on a phone

Example

Final version

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;
}