In my current project, I am facing an issue with my menu displaying differently in Firefox and Chrome. When clicking on the links in Chrome, they tend to move around, disrupting the styling of the menu. A common suggestion I found was to use display: block; on the a element to resolve this problem, but unfortunately, it did not work as expected.
If you'd like to see a demonstration of the issue, you can visit the following link: https://jsfiddle.net/dewg1L8y/1/. Feel free to try it out in Chrome by clicking on the links to understand the issue better.
I'm also looking for suggestions on how to address the text wrapping behavior in Chrome, as it differs from Firefox where the text stays on one line.
Below is a snippet of the HTML code:
<ul>
<li>
<a href="#">link 1</a>
</li>
<li>
<a href="#">second link</a>
</li>
<li>
<a href="#">3</a>
</li>
</ul>
And here is the CSS code:
li {
display: inline-block;
list-style: none;
}
a {
display: block;
color: #000;
padding: 0 10% 0 10%;
text-decoration: none;
}