title: Drop down menu on mobile site
body: <p>I worked on a website and it has a dropdown menu, I made the layout responsive and added a media query for mobile devices. Only thing is, the dropdown menu does drop down on mobile though it also activates the first link and so it goes directly to that page which gives you like a second to respond.</p>
  
  <p>I learned about this in school and I could swear there was a very easy fix for this, something like onclick or something like that. Though it's late, I'm trying to fix this and I just can't find anything for it. </p>
  
  <p>This is the dropdown html;</p>
  
  <pre><code>&lt;div class="nav"&gt;
      &lt;div class="links"&gt;
          &lt;ul id="dropdown"&gt;
              &lt;li&gt;
                  &lt;a href="index.html"&gt; Tetterode &lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="project.html"&gt;Project&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="promenade.html"&gt;Promenade&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="brochure.html"&gt;Brochure&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="impressies.html"&gt;Impressies&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="oplevering.html"&gt;Woningen&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="oplevering.html"&gt;Oplevering&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="impressies.html"&gt;Impressies&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="currentpage"&gt;
                  &lt;a href="ligging.html"&gt;Locatie&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="ligging.html"&gt;Ligging&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="situatie.html"&gt;Situatie&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="routeplanner.html" class="smaller"&gt;Route&lt;br&gt;planner&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="hypotheken.html"&gt;Financiering&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="hypotheken.html"&gt;Hypotheken&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="makelaars.html"&gt;Contact&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="makelaars.html"&gt;Makelaars&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;               
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the css;</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I basically want to be able to click on the base navigation items (tetterode, woningen etc) and see the other items come down so I actually have time to click on them if I would want to.</p>