ipad html css,Hover Not Working On Ipad HTML/CSS

最新推荐文章于 2025-02-26 17:16:03 发布

阿黄sweetgirl

最新推荐文章于 2025-02-26 17:16:03 发布

阅读量141

点赞数

文章标签： ipad html css

作者使用CSS和HTML创建了一个导航栏，在iPad上部分功能无法正常工作。具体表现为触摸导航栏某些项时，下拉菜单显示不一致。该问题在桌面版和Android设备上不存在。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

I realise there are a number of questions / answers referring to HOVER not working on iPad but I think my problem is slightly different.

My problem is that the HOVER works fine on desktop and only part works on the iPad (touch devices). What I mean by that is that if I touch one of the lists on the NAV bar on iPad it works fine but if I choose another list on the NAV bar it does not work - (I have inconsistent behaviour)

I am using CSS / HTML (cannot program in jquery)

So on APPLE devices if I touch the STEAM TOURS part of the NAV the drop down appears fine. Same for LUXURY TOURS. But will not work for GENERAL or ENTHUSIASTS TOURS. However it all works on the desktop as expected and it works on my Android phone

Here is my HTML

Railwide.co.uk

Here is the CSS

/* Navigation Style */

.dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:35px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; }

/* Basic List Styling (First/Base Level) */

.dropdown ul {padding:0; margin:0; list-style: none;}

.dropdown ul li {float:left; position:relative;}

.dropdown ul li a { border-right:1px solid #666666; padding:0px 8px 0px 8px;line-height:35px;display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}

.dropdown ul li a:hover {color:#ffffff; background:#232323;}

/* Second Level Drop Down Menu */

.dropdown ul li ul {display: none;}

.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; border-top:1px solid #666666; top:35px; min-width:150px; left:0;}

.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; }

.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}

/* Third Level Drop Down Menu */

.dropdown ul li:hover ul li ul {display: none;}

.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }

#container {

overflow:hidden;

background:#F8ECC2;