UPDATE:
After suspecting an issue with fontawesome, I decided to switch the icons to plain text:
<a href=\"javascript:void(0)\" onclick=\"expandMenu($(this))\" class=\"show-second-level toggle\"><span>V</span></a><a href=\"javascript:void(0)\" onclick=\"retractMenu($(this))\" class=\"hide-second-level toggle\"><span>^</span></a>
The plain text links are now visible and functional on all devices except for iPad, where they do not respond when clicked.
I have implemented a collapsible menu on my website. Within the unordered list (ul), there are categories displayed with small caret links (fontawesome) that open/close the inner menu. This is how it appears on my iPhone:
Screenshot of menu on my iPhone
The red border surrounds the 'a' tag, indicating that clicking within this area will expand the menu. This functionality works as expected on all desktop browsers and my iPhone. However, a client has reported issues on an iPad, MS Surface Pro, and Android phone. Each device presents different problems such as missing arrow links or non-responsive areas.
This is the code responsible for generating these menu items:
<ul>
<asp:Repeater ID="MenuRepeater" runat="server" OnItemDataBound="MenuRepeater_ItemDataBound">
<ItemTemplate>
<li <%# (Container.DataItem as LinkData).Class %>>
<asp:HyperLink ID="MenuHyperLink" runat="server">
</asp:HyperLink>
<%# (Container.DataItem as LinkData).ExpandLinks %>
<ul>
<asp:Repeater DataSource='<%# DataBinder.Eval(Container.DataItem, "SubLinks") %>' runat="server">
<ItemTemplate>
<li <%# (Container.DataItem as LinkData).Class %>>
<a href='<%# DataBinder.Eval(Container.DataItem, "Link") %>'><%# DataBinder.Eval(Container.DataItem, "Text") %></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
My assumption is that this issue may be related to CSS or javascript, but I am uncertain about what exactly is causing the problem.
Below is the HTML rendered output:
<ul>
<li class="active">
<a id="ctl00_MainContentPH_SideBreadcrumb_MenuRepeater_ctl00_MenuHyperLink" href="/Our-Services/">Our Care</a>
<ul></ul>
</li>
<li class="sub-parent">
<span>Specialty Care and Programs</span>
<ul></ul>
</li>
<li class="category expandable">
<span>Programs and Clinics</span>
<a href="javascript:void(0)" onclick="expandMenu($(this))" class="show-second-level toggle"><i class="fa fa-caret-down"></i></a><a href="javascript:void(0)" onclick="retractMenu($(this))" class="hide-second-level toggle"><i class="fa fa-caret-up"></i></a>
<ul>
<li class="category-child">
<a href="/Our-Services/Programs-and-Clinics/Birthmark-Treatment-Program/">Birthmark Treatment Program</a>
</li>
<li class="category-child">
<a href="/Our-Services/Programs-and-Clinics/Cancer-and-Blood-Disorders-Center/">Cancer and Blood Disorders Center</a>
</li>
<li class="category-child">
<a href="/Our-Services/Programs-and-Clinics/Craniofacial-Reconstruction-Program/">Craniofacial Reconstruction Program</a>
</li>
</ul>
</li>
<li class="category expandable">
<span>Rehabilitative Services and Therapy</span>
<a href="javascript:void(0)" onclick="expandMenu($(this))" class="show-second-level toggle"><i class="fa fa-caret-down"></i></a><a href="javascript:void(0)" onclick="retractMenu($(this))" class="hide-second-level toggle"><i class="fa fa-caret-up"></i></a>
<ul>
<li class="category-child">
<a href="/Our-Services/Rehabilitative-Services-and-Therapy/Occupational-Therapy/">Occupational Therapy</a>
</li>
<li class="category-child">
<a href="/Our-Services/Rehabilitative-Services-and-Therapy/Physical-Therapy/">Physical Therapy</a>
</li>
<li class="category-child">
<a href="/Our-Services/Rehabilitative-Services-and-Therapy/Specialty-Therapy-Services/">Specialty Therapy Services</a>
</li>
</ul>
</li>
<li class="last ">
<a id="ctl00_MainContentPH_SideBreadcrumb_MenuRepeater_ctl04_MenuHyperLink" href="/Our-Doctors/Medical-Specialists/">Medical Specialists</a>
<ul></ul>
</li>
</ul>