I successfully implemented a navigation menu on my website by following this helpful tutorial.
Below is the CSS code I used:
ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #F2C777;
}
li a {
display: block;
padding: 10px;
text-align: center;
color: #7C785B;
}
li a:hover {
background-color: #EC8C65;
}
li {
display: inline-block;
}
.dropbutton:hover .droplinks{
display: block;
}
.droplinks {
position: absolute;
background-color: #F2D299;
min-width: 140px;
display: none;
}
.droplinks a {
padding: 10px;
display: block;
}
And here is the HTML code:
<nav>
<ul>
<li><a href="">Home</a></li>
<li class="dropbutton"><a href="">Products</a>
<div class="droplinks">
<a href="">Widgets</a>
<a href="">Cogs</a>
<a href="">Gears</a>
</div>
</li>
<li class="dropbutton"><a href="">Services</a>
<div class="droplinks">
<a href="">Handshakes</a>
<a href="">Winks</a>
<a href="">Smiles</a>
</div>
</li>
<li><a href="">Shop</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
However, I encountered a problem with the navigation menu on smartphones. It is difficult to navigate to the drop-down links without clicking on the first-level link. I want to add a clickable area between each first-level link that allows users to access the drop-down menu without navigating away from the page.
I tried various solutions, including positioning a button after the link, but it affected the alignment. Altering the "display" attribute and using a "div" tag also did not resolve the issue.
How can I insert a clickable button between each first-level link in the multi-level drop-down menu while maintaining horizontal alignment and a single line layout?
My goal is to achieve a similar navigation bar to the one on this website, but without having the sub-link indicator inside the first-level link.
N.B: I am looking for a solution that does not involve JQuery. Please avoid providing solutions involving this library.
Here is the JSFiddle link for reference.