Q: Drop down menu on mobile site 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.
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. 
This is the dropdown 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>

And this is the 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;
}

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.

A: Here is your JSFIDDLE for your code.
I tested it with my Iphone 4 using IOS 6. whenever you click on one of the menu's you get redirected to the link in that menu. in order to solve the problem, you need to delete those links and replace them with # in order for your code to work on mobile site
so, this HTML structure will solve your problem (use it only on mobile sites) :
<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>

MY answer may sound stupid. but this is the only way if you want to keep the same structure and same css. Have fun coding!
