I have just built my first responsive website but there is one issue I am facing, the CSS dropdown menus work on android and Chrome's emulation but not in safari on iPhones or iPads. Here is a link to a working copy and here is the code:
HTML
<nav role="navigation" id="top-nav" class="floatRight">
<div class="nav top-nav cf">
<ul>
<li class="page_item page-item-25 current_page_item"><a href="http://phily245.me.uk/gibson/">Home</a></li>
<li class="page_item page-item-35"><a href="http://phily245.me.uk/gibson/contact/">Contact Us Now</a></li>
<li class="page_item page-item-37"><a href="http://phily245.me.uk/gibson/services/">Services</a></li>
<li class="page_item page-item-41"><a href="http://phily245.me.uk/gibson/gallery/">Gallery</a></li>
</ul>
</div>
</nav>
CSS
#top-nav {
margin-top: 60px;
z-index:200;
}
#top-nav li {
float: left;
background-image: none;
padding-left: 0;
}
#top-nav li a {
font-size: 14px;
padding: 8px 12px;
color: #797f94;
display: block;
}
#top-nav li:hover {
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2AA6FF),
color-stop(1, #1E8AD7)
);
background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
border-radius: 5px;
}
#top-nav li:hover a {
color: #ffffff;
text-decoration: none;
}
/* ==========================================================================
Tablet changes
========================================================================== */
@media screen and (min-width: 640px) and (max-width: 1024px) {
#top-nav {
width: 70px;
border-radius: 3px;
position: absolute;
right: 20px;
z-index: 300;
}
#top-nav::before {
content: "Menu";
}
#top-nav ul {
width: 100%;
}
#top-nav::before:hover div, #top-nav::before:focus div, #top-nav:hover div, #top-nav:focus div {
z-index: 400;
display: block;
}
#top-nav li {
background-image: none;
position: relative;
}
#top-nav li:hover {
background-image: none;
}
}
/* ==========================================================================
Tablet & mobile changes
========================================================================== */
@media screen and (max-width: 1024px) {
#top-nav {
padding: 8px 12px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2AA6FF),
color-stop(1, #1E8AD7)
);
background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
}
#top-nav li a {
color: #ffffff;
}
#top-nav::before {
color: #ffffff;
background-image: url(../images/menu.gif);
background-position: 0% 3px;
background-repeat: no-repeat;
padding-left: 29px;
}
#top-nav li:hover a {
color: #ffffff;
text-decoration: underline;
}
#top-nav div {
display: none;
}
#top-nav:hover div {
/*position: absolute;*/
}
#top-nav:hover {
height: 210px;
}
}
/* ==========================================================================
Mobile changes
========================================================================== */
@media screen and (max-width: 639px) {
#top-nav {
margin-top: 0;
overflow: hidden;
float: none;
}
#top-nav::before {
content: "J Gibson Electrical";
font-family: segoe-script, "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
}
#top-nav ul {
width: 100%;
}
#top-nav li {
clear: left;
}
#top-nav:hover div {
display: block;
}
#top-nav li:hover, #top-nav li:focus {
background-image: none;
}
}
Solution
As the accepted answer says, JavaScript was the solution. Here was my solution:
//This goes in an onload or onresize event
if(viewportWidth <= 1024)
$("#top-nav").click( function() {
toggleMenu();
});
}
function toggleMenu()
{
menuItems = $("#top-nav div");
if(menuItems.css("display") == "none")
{
menuItems.css({
"display": "block"
});
}
else
{
menuItems.css({
"display": "none"
});
$("#top-nav").css({
"height": "auto"
});
}
}