Excuse me if this question seems silly, but as a developer with minimal design skills at the moment, I am encountering a minor issue while working on my personal website.
I have a top navigation bar with ul and li items. These items contain links <a href..., and within these links, there is a <span>.
The span only becomes visible when the link is hovered over.
CSS
div#topnav a span {display: none;}
div#topnav a:visited span {display:none;}
div#topnav a:hover span {display: block;}
The issue I'm facing is that the span contains quite a bit of text, and when it appears, it increases the width of the link, causing the rest of the navigation bar to shift to the right.
Is there a way to make the link ignore the width of the span so that it doesn't change when the span appears, preserving the width set by the text outside the span?
HTML
<div id="topnav">
<ul>
<li><a href="http://www.google.co.uk">Example<span>this is a link to google</span></a></li>
<li><a href="http://www.bbc.co.uk">Another EG<span>this is another link that goes to bbc!</span></a></li>
</ul>
</div>
It's important to mention that the text inside the span appears below the navigation bar, and I need all of it to be visible.