我一直在设计和编码我的网站,当在iPad或iPhone上查看网站时,简单的下拉菜单不起作用.
我环顾四周,试图实现一些在线解决方案,即jquery片段,可识别用户何时使用某种特定设备,但无济于事.我不确定它是否因为这些方法被弃用或因为我做错了(可能是后者)
有问题的网站是http://www.sotomayormac.com
顶部菜单项:"我们的思考"通过href = #link下拉到子菜单.当它在iPad/iPhone上轻敲时会突出显示(a:悬停),但不会出现子菜单.我很确定这是问题的关键部分.
菜单的html代码如下:
<!-- Start of MENU -->
<ul id="ddmenu">
<li><a id="topLink" href="#">Our thinking</a>
<ul>
<li><a href="index.html">Showcase</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
Run Code Online (Sandbox Code Playgroud)
相应的CSS:
#ddmenu {
background: #fff no no-repeat;
margin-left:50px;
padding: 0;
height:43px;
width:200px;
}
#ddmenu li {
float: left;
list-style: none;
margin-left:0px;
}
#ddmenu li a {
background:#fff;
display: block;
padding: 0px 0px;
text-decoration: none;
width: 70px;
color:#000;
white-space: nowrap;
text-align:left;
}
#ddmenu li a:hover {
background: #fff;
color:#666;
}
#ddmenu li …Run Code Online (Sandbox Code Playgroud)