При наведение мыши убирать пунктирное подчеркивание и давать сплошное

[f0rym4anin]

Здравствуйте

Имеется меню которое php выводит из smarty шаблона

Пункт "Специальные предложения" выделен пунктиром

<span  id="small_white_bold"><a href="/main/">Главная</a></span>
<span  id="small_white_bold"><a href="/about/">О компании</a></span>
<span  id="small_white_bold"><a href="/news/">Новости</a></span>
<span  id="small_white_bold"><a href="/articles/">Статьи</a></span>
<span  id="small_white_bold" style="border-bottom: 1px dashed;"><a href="/special/">Специальные предложения</a></span>
<span  id="small_white_bold"><a href="/contacts/">Контакты</a></span>

<style type="text/css">
<!--
#small_white_bold {font-size : 12px; font-weight:bold; color: #ffffff; text-decoration: none;}
#small_white_bold a:link, #small_white_bold a:active, #small_white_bold a:visited {font-size : 12px; font-weight:bold; color: #ffffff; text-decoration: none;}
#small_white_bold a:hover {font-size : 12px; font-weight:bold; color: #ffffff; text-decoration: underline;}
-->
</style>

При таком раскладе при hover под "Специальными предложениями" есть и пунктир и сплошное подчеркивание

Как сделать так чтоб при hover пунктирное подчеркивание исчезало?

Заранее спасибо

[Zippovich]

в данной конструкции без js никак.

поменяйте вложенность, т.е.:

<a href="/main/"><span id="small_white_bold">Главная</span></a>

тогда можно будет обрабатывать конструкцию:

a:hover span {}

[Lincky]

без js можно и обойтись. если на ие6 забить.

#small_white_bold:hover {border: 0}

#small_white_bold a:hover {font-size : 12px; font-weight:bold; color: #ffffff; text-decoration: none;}

[psywalker]

1) Изначально пропиши эту фигню ссылке, а не span:

<span id="small_white_bold" ><a href="/special/" style="border-bottom: 1px dashed;">Специальные предложения</a></span>

2) При hover уже делай со ссылкой чё хош))