CSS 수평 메뉴가 터치 장치에서 작동하지 않습니다.

Question

컴퓨터의 브라우저에서 올바르게 작동하는 수평 메뉴의 순수 CSS 구현이 있습니다. 웹 사이트는 www.intercessionsp.org입니다. 그러나 터치 장치 (특히 iPad 및 iPhone에서 Safari를 사용해 본 적이 있음)에서는 메뉴가 작동하지 않습니다. 하위 메뉴 (홈 메뉴 항목이 정상적으로 작동)가 있으면 해당 메뉴를 건 드리면 응답이 전혀 없습니다. 나는 두 가지 솔루션을 구현하려고 시도했다. 1. onclick = "return true", "iPad/iPhone Touch Event on Hover CSS"에있는 terraling의 솔루션을 기반으로 stackoverflow에 대한 질문이 여기에있다. 2. #ios ul {display : none; } 및 #ios li : hover ul {display : block; } elfboy.com의 Philip Renich가 작성한 "iPhone에서 CSS 작업 드롭 다운 메뉴 작업"이라는 게시물을 기반으로합니다. 어느 쪽도 효과가 없습니다. ,>은을 가져가 내 리에서 블록 : 호버이> .nav, 내가 리를 #nav에 추가 시도 이미 디스플레이를 가지고 있기 때문에

/* horizontal menus */ 
#nav, .nav, #nav .nav li { 
    margin:0px; 
padding:0px; 
} 
#nav li { 
float:left; 
display:inline; 
cursor:pointer; 
list-style:none; 
padding:10px 30px 10px 30px; 
border:1px #000 solid; 
position:relative; 
background: #990000; 
} 
#nav li ul.first { 
left:-1px; 
top:100%; 
} 
li, li a { 
color:#fff; 
text-decoration:none; 
} 
#nav .nav li { 
width:100%; 
text-indent:10px; 
line-height:30px; 
margin-right:10px; 
border-top:1px #000 solid; 
border-bottom:1px #000 solid; 
border-left:none; 
border-right:none; 
background:#990000; 
onclick="return true" 
} 
#nav li a { 
display:block; 
width:inherit; 
height:inherit; 
} 
ul.nav { 
display:none; 
} 
#nav li:hover > a, #nav li:hover { 
color:#990000; 
background:#fff; 
} 
li:hover > .nav { 
display:block; 
position:absolute; 
width:200px; 
top:-2px; 
left:30%; 
z-index:1000; 
border:1px #000 solid; 
} 
li:hover { 
position:relative; 
z-index:2000; 
} 

#basic li { 
color:#000; 
} 

가 :

여기 내 CSS 파일의 관련 부분입니다 #nav li : 마우스를 올리면 작동하지 않으며 li : 마우스를 올리면 작동하지만 둘 다 작동하지 않습니다. 나는 너비 값을 설정하는 것에 대한 Renish의 의견을 보았지만, 너비 값을 이미 설정했기 때문에 유용하지 않은 것으로보아야한다고 덧붙여 야합니다.

순수한 CSS 구현을 유지하고 싶습니다.

Answer 1

메뉴는 목록 항목을 표시하기 위해 CSS 선택기 :hover에 의존합니다. 아이폰과 같은 모바일 장치에 표시하려면 사용자가 클릭 할 수 있어야합니다. 메뉴의 첫 번째 수준에있는 텍스트를 <a> 태그로 묶어보십시오. 모바일 장치에 <a href="#">About Us</a>

보기이 : 완벽하게 작동

http://jsfiddle.net/tlaverdure/L42AE/