Forum
My CSS menu doesn't work on iPhones and iPads in perch.
My CSS menu doesn't work on iPhones and iPads in perch.
I created a CSS menu and made it a shared region in perch. Then my sub menu's don't work.
Please Help!
PHP File
<?php include('stormpc/runtime.php'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css3menu.com</title>
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="css/menu.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
</head>
<body style="background-color:#EBEBEB">
<?php perch_content('Menu'); ?>
</body>
</html>
HTML FILE
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="../" style="width:80px;height:30px;line-height:30px;">HOME</a></li>
<li class="topmenu"><a style="width:61px;height:30px;line-height:30px;"><span>JOIN</span></a>
<ul>
<li><a href="../member-benefits/">Member Benefits and Services </a></li>
<li><a href="https://business.lccmadison.org/member/newmemberapp/">Membership Application</a></li>
</ul>
</li>
<li class="topmenu"><a href="https://business.lccmadison.org/list/" style="width:260px;height:30px;line-height:30px;">BUSINESS DIRECTORY</a></li>
<li class="topmenu"><a style="width:150px;height:30px;line-height:30px;"><span>RESOURCES</span></a>
<ul>
<li><a href="../business-resources/">Business Resources</a></li>
<li><a href="https://business.lccmadison.org/membertomember/">Member to Member</a></li>
<li><a href="../marketing-opportunities/">Marketing Opportunities</a></li>
<li><a href="https://business.lccmadison.org/jobs/category/">Job Postings</a></li>
</ul>
</li>
<li class="topmenu"><a style="width:80px;height:30px;line-height:30px;"><span>NEWS</span></a>
<ul>
<li><a href="../mundo-de-negocios/">Mundo de Negocios</a></li>
<li><a href="../newsletters/">Newsletters</a></li>
<li><a href="../press-release/">Press Release</a></li>
<li><a href="../annual-report/">Annual Report</a></li>
<li><a href="../media-mentions/">Media Mentions</a></li>
</ul>
</li>
<li class="topmenu"><a style="width:95px;height:30px;line-height:30px;"><span>EVENTS</span></a>
<ul>
<li><a href="https://business.lccmadison.org/events/details/latino-art-fair-6">Art Fair</a>
<ul>
<li><a href="../art-fair/about-the-fair/">About the Fair</a></li>
<li><a href="../art-fair/meet-the-artists/">Meet the Artist</a></li>
<li><a href="../art-fair/sponsors/">Our Sponsors</a></li>
<li><a href="../art-fair/raffle/">Raffle</a></li>
<li><a href="../art-fair/press/">Press/Media Packet</a></li>
</ul>
</li>
<li><a href="../gala/"><span>Gala</span></a>
<ul>
<li><a href="../gala/sponsorship/">Sponsorship Program</a></li>
<li><a href="../gala/2013-awards/">2013 Gala Awards</a></li>
<li><a href="../gala/2014-awards/">2014 Gala Awards</a></li>
</ul>
</li>
</li>
<li><a href="https://business.lccmadison.org/events/calendar/">Event Calendar</a></li>
<li><a href="https://business.lccmadison.org/events/catgid/6/">Chamber Events</a></li>
<li><a href="../media-gallery/">Events Gallery</a></li>
</ul>
</li>
<li class="topmenu"><a style="width:120px;height:30px;line-height:30px;"><span>ABOUT US</span></a>
<ul>
<li><a href="../presidents-message/">Message from the President</a></li>
<li><a href="../board-of-directors/">Board of Directors</a></li>
<li><a href="../docs/">BOD Forms & Documents</a></li>
<li><a href="../employment/">Employment</a></li>
<li><a href="https://business.lccmadison.org/contact/">Contact Us</a></li>
</ul>
</li>
</ul>
<!-- End css3menu.com BODY section -->
CSS
ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#FFFFFF;border-width:0;border-style:solid;border-color:;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 3px #000000;-webkit-box-shadow:0.7px 0.7px 3px #000000;box-shadow:0.7px 0.7px 3px #000000;background-color:#b0b8c9;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:0 5px 5px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;left:-124%;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;background-color:#b0b8c9;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-style:solid,solid;
*display:inline;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
cursor:pointer;display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold italic 18px Georgia,serif;color:#000000;cursor:default;padding:3px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
float:none;margin:5px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:7px;background-color:;border-width:1px;border-style:solid;border-color:transparent;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;font:bold 14px "Times New Roman",Times,serif;color:#000000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#b0b8c9;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-style:solid,solid;
*display:inline;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:center;background-repeat:no-repeat;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#b0b8c9;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-style:solid,solid;
*display:inline;}
ul#css3menu1>li>a{
padding:10px 10px;}
ul#css3menu1 li.topmenu>a{
cursor:pointer;background-color:;border-width:0 1px;border-style:solid;border-color:transparent;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:10px 10px;color:#be5f1d;text-shadow:0 2px 2px #ffffff;background-image:-o-linear-gradient(0deg,rgba(0,0,0,0.2),rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(0,0,0,0.2)); background-image:-moz-linear-gradient(0deg,rgba(0,0,0,0.2),rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(0,0,0,0.2)); background-image:linear-gradient(270deg,rgba(0,0,0,0.2),rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(0,0,0,0.2)); background-image:-webkit-linear-gradient(0deg,rgba(0,0,0,0.2),rgba(255,255,255,0) 8%,rgba(255,255,255,0) 92%,rgba(0,0,0,0.2));border-style:solid;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
cursor:pointer;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
background-color:#b0b8c9;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0)); background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,0.93) 50%,rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-style:solid,solid;border-color:#FFF;color:#0176eb;text-shadow:0 1px 1px #FFFFFF;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorstr=#33000000,endColorstr=#33000000)}
What's leading you to believe that the issue is caused by Perch?
This isn't caused by perch.
It's because you are using the pseudo-class hover, touch devices do not have hover, so you have to be pretty specific how you use it.
If you try your code in Chrome App for iOS it works fine, Safari not at all.
Because you have no hyperlink reference attribute on your top level menu anchors, i know this is because you are not linking to a page but it will not work without it.
You have some options
add href="#" < Down side adds a # to the end of your url when clicked
add href="" < Will refresh the page when clicked and not considered standard practice
add href="new-page" < This will let you tap once to open your submenu and again it will visit the page.
Or write some javascript
But this is definitely not a Perch issue
Because it works fine as HTML until I put it in perch as a PHP region.
Plus it works on everything else "Android Tabs and Phone, all browsers in Windows and Mac" but not on iPad's or iPhone's or iPod's.
Can you try changing
to
And see if the "JOIN" submenu works?
I've tried this on your code and it fixes it for me
Ok I see it. That worked. Thanks Dexter. I really appreciate your help.