Mouseout not working on Android webpage

Mouseout not working on Android webpage

I am trying to rewrite my webpages to display properly on a smartphone. In
my testing I cannot get a dropdown menu to disappear when the mouse moves
out of the div of the dropdown menu. Below is my code:
<script type="text/javascript">
function expandMenu() {
document.getElementById("moreMenu").style.display = "block";
}
function hideMenu() {
document.getElementById("moreMenu").style.display = "none";
}
</script>
.......
<div class="medianfont"><a href="news/pastnews.aspx">News &nbsp; -
</a><a href="email.aspx"> Email &nbsp; - </a><a
href="pastedit.aspx">Editorials &nbsp; - </a>
<span style="cursor:pointer; color:blue" onclick="expandMenu()">
More</span><br />
<div id="moreMenu" style="display:none; margin-left:14em;"
onmouseout="hideMenu()" onclick="hideMenu()">
<a href="histart.htm">History </a><br />
<a href="calendar.aspx">Events </a><br />
</div>
</div>
It works ok when testing on my desktop but in testing on my Android phone,
the dropdown menu will appear but no amount of clicking will make it go
away even though the links do work. So is there a way to get a dropdown
menu to disappear on a smartphone similar to a desktop? I am not coding in
Android, I am merely displaying the webpage on a smartphone.