adding php dropdown menu within li items

adding php dropdown menu within li items

With modification of the code below, I would like to display the following
html output (i.e class="more" and its dropdown menu. Can anyone please
suggest me a workaround?
<?php
$pages = array(
'0' => array('title' => 'Health', 'url' => 'health.php'),
'1' => array('title' => 'Weightl Loss', 'url' => 'weightloss.php'),
'2' => array('title' => 'Fitness', 'url' => 'fitness.php'),
'3' => array('title' => 'Sex', 'url' => 'sex.php'),
'4' => array('title' => 'Mind-Body', 'url' => 'mindbody.php'),
'5' => array('title' => 'Food', 'url' => 'food.php'),
'6' => array('title' => 'Beauty', 'url' => 'beauty.php'),
);
echo "<div id=\"nav-menu\" >\n";
// let's create a unordered list to display the items
echo "<ul>";
// here's where all the items get printed
foreach ($pages as $Listing) {
echo "<li>\n";
echo "<a href='" . $Listing["url"] . "'>" . $Listing["title"] . "</a>\n";
echo "</li>\n";
}
// closing the unordered list
echo "</ul>";
echo "</div>\n";
?>
Here is the desired html output.
<div id="nav-menu" >
<ul>
<li><a href='health.php'>Health</a></li>
<li><a href='weightloss.php'>Weightl Loss</a></li>
<li><a href='fitness.php'>Fitness</a></li>
<li><a href='sex.php'>Sex</a></li>
<li><a href='mindbody.php'>Mind-Body</a></li>
<li><a href='food.php'>Food</a></li>
<li><a href='beauty.php'>Beauty</a></li>
<li class="more"> <span>More <img src="w.png"
id="down-arrow-white"><img src="b.png"
id="down-arrow-dark-blue"></span>
<ul style="display: none;" id="more-menu">
<li><a href="blogs.php">Blogs</a></li>
<li><a href="horoscopes.php">Horoscopes</a></li>
</ul><!-- /more_menu -->
</li>
</ul>
</div>