CSS охват ссылки

Question

Извините, если это действительно глупый вопрос, но я разработчик, и мои дизайнерские навыки минимальны, я работаю над личным сайтом и застрял с незначительной проблемой.

У меня топ-навигация с элементами ul и li. Эти элементы содержат ссылку <a href..., а внутри этих тегов у меня есть <span>.

Диапазон отображается только при наведении ссылки.

CSS

div#topnav a span {display: none;}
div#topnav a:visited span {display:none;}
div#topnav a:hover span {display: block;}

Проблема в том, что в 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>

Стоит отметить, что этот текст в промежутке отображается под навигацией, поэтому мне нужно, чтобы все это отображалось.

Answer 1

хорошо, если вы хотите, вы можете просто удалить промежуток из потока, и они перестанут влиять на ссылки любым способом, просто задав абсолютную позицию для диапазона и относительную позицию для a.Вам также не нужно: посещения, я думаю, так как я предполагаю, что это предотвратит показ ссылки, если она уже была посещена.Например:

div#topnav a {position:relative;}
div#topnav a span {display: none;}
div#topnav a:visited span {color:purple;}
div#topnav a:hover span {display: block;postion:absolute;bottom:-50px;}

Вы можете изменить нижнее значение в соответствии со своими потребностями или добавить свойства влево / вправо, чтобы расположить их дальше.Вы можете также рассмотреть возможность добавления ширины к диапазону.position: относительное относительно a требуется, чтобы диапазон знал, куда идти на 50 пикселей вниз.

Edit: добавлен посещаемый класс, поскольку он может помочь ux до степени, просто изменивцвет текста.

Answer 2

Попробуйте использовать тег div вне тега a, который имеет фиксированную ширину, чтобы ваш контент не проходил по указанной ширине.

Answer 3

Просто установите ширину диапазона / ссылки, чтобы он не определялся автоматически по длине содержимого.

div#topnav a span { width: 50px; }

Примечание: 50px является примером, вы можете установить его на то, что вы хотите.