What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

hover button and close option to work on ipad


New member
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:

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