모바일 사이트의 드롭 다운 메뉴

Question

나는 웹 사이트에서 일했으며 드롭 다운 메뉴가 있습니다. 레이아웃을 반응 적으로 만들었고 모바일 장치 용 미디어 쿼리를 추가했습니다. 단 한 가지가 있습니다. 드롭 다운 메뉴는 모바일에서도 드롭 다운되지만 첫 번째 링크가 활성화되므로 바로 응답 할 수있는 초를주는 페이지로 바로 이동합니다.

학교에서이 사실을 알게되었고,이를 위해 onclick이나 비슷한 것을 쉽게 수정할 수 있다고 맹세했습니다. 늦었지만이 문제를 해결하기 위해 노력하고 있으며 아무 것도 찾을 수 없습니다.

이것은 드롭 다운 HTML입니다.

<div class="nav"> 
    <div class="links"> 
     <ul id="dropdown"> 
      <li> 
       <a href="index.html"> Tetterode </a> 
       <ul> 
        <li><a href="project.html">Project</a></li> 
        <li><a href="promenade.html">Promenade</a></li> 
        <li><a href="brochure.html">Brochure</a></li> 
        <li><a href="impressies.html">Impressies</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="oplevering.html">Woningen</a> 
       <ul> 
        <li><a href="oplevering.html">Oplevering</a></li> 
        <li><a href="impressies.html">Impressies</a></li> 
       </ul> 
      </li> 
      <li class="currentpage"> 
       <a href="ligging.html">Locatie</a> 
       <ul> 
        <li><a href="ligging.html">Ligging</a></li> 
        <li><a href="situatie.html">Situatie</a></li> 
        <li><a href="routeplanner.html" class="smaller">Route<br>planner</a></li> 

       </ul> 
      </li> 
      <li> 
       <a href="hypotheken.html">Financiering</a> 
       <ul> 
        <li><a href="hypotheken.html">Hypotheken</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="makelaars.html">Contact</a> 
       <ul> 
        <li><a href="makelaars.html">Makelaars</a></li> 
       </ul> 
      </li>    
     </ul> 
    </div> 
</div> 

그리고 이것은 CSS입니다.

.nav{ 
    width: 100%; 
    height:50px; 
    background-image:url("bg.jpg"); 
    background-repeat:repeat; 
    text-align:center; 
    padding-bottom:0px; 
    margin-bottom:0px; 
} 
.links ul li { 
    list-style-type: none; 
    padding-right: 15px; 
    height:50px; 
    display:inline-block; 
    padding-top:0px; 
    line-height:50px; 
    padding-left:14px; 
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50); 
    margin-top:0px; 
} 
.links ul li:hover { 
    height:50px; 
    background-color:#b5001e; 
    display:inline-block; 
    margin:0px; 
} 
.links a { 
    text-transform:uppercase; 
    font-family:helvetica; 
    font-size:16px; 
    color:#fff; 
    display:inline-block; 
    font-size:20px; 
    text-decoration:none; 
} 
.links a:hover { 
    background-color:transparent; 
} 
#dropdown ul{ 
    background-color:#b5001e; 
    list-style:none; 
    position:absolute; 
    left:-9999px; 
    z-index:20; 
    font-size:16px; 
    padding-top:0px; 
    margin-top:-2px; 
    } 
#dropdown ul li{ 
    float:none; 
} 
#dropdown ul a{ 
    white-space:nowrap; 
    font-size:16px; 
} 
#dropdown li:hover ul{ 
    left:0; 
} 
#dropdown li:hover a{ 
    text-decoration:underline; 
} 
#dropdown li:hover ul a{ 
    text-decoration:none; 
} 
#dropdown li:hover ul li a:hover{ 
color:#000; 
} 
.currentpage{ 
    height:50px; 
    background-color:#b5001e; 
    display:inline-block; 
} 

나는 기본적으로 기본 탐색 항목 (tetterode, woningen 등)을 클릭하고 다른 항목은 그래서 실제로 내가 원하는 것인지 그들에 클릭 할 시간이 내려와 볼 수 있어야합니다.

Answer 1

다음은 코드 용으로 JSFIDDLE입니다.

IOS 6을 사용하여 Iphone 4에서 테스트했습니다. 메뉴 중 하나를 클릭 할 때마다 해당 메뉴의 링크로 리디렉션됩니다. 문제를 해결하려면 코드를 모바일 사이트에서 작동하도록하려면 해당 링크를 삭제하고 #로 바꿔야합니다.

이렇게 HTML 구조가 문제를 해결합니다 (모바일 사이트에서만 사용).

<div class="nav"> 
    <div class="links"> 
     <ul id="dropdown"> 
      <li> 
       <a href="#"> Tetterode </a> 
       <ul> 
        <li><a href="project.html">Project</a></li> 
        <li><a href="promenade.html">Promenade</a></li> 
        <li><a href="brochure.html">Brochure</a></li> 
        <li><a href="impressies.html">Impressies</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Woningen</a> 
       <ul> 
        <li><a href="oplevering.html">Oplevering</a></li> 
        <li><a href="impressies.html">Impressies</a></li> 
       </ul> 
      </li> 
      <li class="currentpage"> 
       <a href="#">Locatie</a> 
       <ul> 
        <li><a href="ligging.html">Ligging</a></li> 
        <li><a href="situatie.html">Situatie</a></li> 
        <li><a href="routeplanner.html" class="smaller">Route<br>planner</a></li> 

       </ul> 
      </li> 
      <li> 
       <a href="#">Financiering</a> 
       <ul> 
        <li><a href="hypotheken.html">Hypotheken</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
       <ul> 
        <li><a href="makelaars.html">Makelaars</a></li> 
       </ul> 
      </li>    
     </ul> 
    </div> 
</div> 

내 대답이 어리석게 들릴 수 있습니다. 그러나 이것은 동일한 구조와 동일한 CSS를 유지하려는 경우 유일한 방법입니다. 재미있는 코딩을해라!