hover button and close option to work on ipad

[mohorter]

on my website i am using a hover option to display data rather than creating a new web page. the concept works on the page with a computer, but not when using a ipad. when you click on the button when using the ipad it will display the information, but wont go away to display the information below it. the only way to go around this is to refresh the page or go back a page. i want to be able to close the window without having to go through these steps. i would like to use css to fix this issue and need some kind of close option.

link to the page:

Francis Mahorter

scroll down the page and hover over margaret (one with the picture)

html used:
<td colspan="2" class="dropdownfam">
<img src="../../profiletags/tag004.jpg" class="dropbtnfam">
<div class="dropdown-contentfam">
<img src="../../familytags/familytag004.jpg">


css used:
/* Dropdown family Button */
.dropbtnfam {

}

/* The container <div> - needed to position the dropdown content */
.dropdownfam {

}

/* Dropdown Content (Hidden by Default) */
.dropdown-contentfam {
display: none;
position: absolute;
background-color: #f1f1f1;

box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content afam {

}

/* Change color of dropdown links on hover */
.dropdown-content afam:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdownfam:hover .dropdown-contentfam {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdownfam:hover .dropbtnfam {background-color: #3a769b;


any help would be greatly appreciated

adam