I'm struggling to figure out how to adjust the click area.
Below are the details:
https://i.sstatic.net/bdbZ8.png
Looking at the image, you can see that the cursor is quite far from the letter, yet it still registers as clickable at that distance.
Here is a snippet of the code to avoid any confusion:
li {
font-size: 20px;
display: inline;
padding-right: 20px;
border: 0px;
}
ul.list li:nth-child(-n+26) a{
font-size: 15px;
color: red;
display: list-item;
z-index: 1;
text-decoration: none;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.onclick div:target {
display: block;
}
.onclick div:hover {
background-color: red;
color: white;
}<nav>
<div>
<ul class="list">
<li><a href="pageA.html">A</a></li>
<li><a href="pageB.html">B</a></li>
<li><a href="pageC.html">C</a></li>
<li><a href="pageD.html">D</a></li>
<li><a href="pageE.html">E</a></li>
</ul>
</div>
</nav>I've already attempted adjusting the multiple child style, sub nav, and separate LI style, but none of them seem to be effective.