Recently, I was working on a website and encountered an issue with the dropdown menu. Despite making the layout responsive and adding a media query for mobile devices, the dropdown menu would activate the first link automatically on mobile, giving users barely a second to respond.
I vaguely remember learning about an easy fix for this in school, something like onclick or similar. However, despite my efforts to find a solution late at night, I have been unsuccessful so far.
Here is the HTML for the dropdown menu:
<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 here is the corresponding 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;
}
...
Essentially, I am looking for a solution that allows me to click on the main navigation items (such as "Tetterode," "Woningen," etc.) and have the other submenu items appear without rushing through the process.