css странное наследование или полтергейст

[mergenmasterf1]

Добрый день, жители форума. Верстаю сайтик с вордпресса в джумлу. возникла странная(для меня) проблема. задал свойство a:hover, focus и active для горизонтального меню с id=mergen. И к моему большому удивлению и глубочайшему сожалению(мягко говоря) теги <a> левого вертикального меню приобрели те же самые свойства. Помогите побороть пожалуйста

А конкретнее: фоновая картинка при фокусе изменяется как в классе menu(первое меню, вертикальное) так и в нужном мне меню класса mergen(второе меню, горизонтальное)

Часть CSS:

body,html {height:100%; }
body{:#ffffff;font: 400 12px/1.3em Arial, Tahoma, Verdana, Helvetica;color:#000;margin:0 auto;}
.clr{clear:both;overflow:hidden;font-size:0;line-height:0;}
ul{list-style:none;margin:0;padding:0}
a,img{outline:none;margin:0;padding:0;border:none;}
a:link, a:visited { color:#000;text-decoration:none;}
a:hover, a:active, a:focus { color:#6d5d01; }
form { padding:0;margin:0; }
header, nav, menu, section, aside, article, footer { display:block; }


iframe {border:none;}
dl dd {
	padding:0 0 0 0px;
	margin:0;
}


.main { margin:0 auto; }
.top { margin:0px auto;height:25px; }
.top .menu { height:152px;padding:0 0px; text-decoration:none; text-align:center; }
.top  li { float:left; display:block; width:140px;font-size:14px; padding:0 20px;  text-align:center;font-weight: 600;}
.top a {  background: transparent url(../images/menutop2-2.png) no-repeat left 0px; display:block; width:100%; text-align:center;}
.top a  { display:block;margin:0 auto;float:left;height:48px;padding:0 0px;color:#0db2db;line-height:47px;cursor:pointer; text-align:center;}

#mergen a:hover,a:active,a:focus { color:#FFF; background: transparent url(../images/menutop2-1.png) no-repeat left 0px; text-align:center;}
 {  
background: transparent url(../images/menutop2-2.png) no-repeat left 0px; display:block; width:100%; text-align:center;}
}

А теперь часть исходного кода, где содержатся теги для горизонтального и вертикального меню.

<div class="module_menu">
			<div>
				<div>
					<div>
													<h3>Выберите категорию</h3>

<ul class="menu">
<li id="item-435"><a href="/special2/" ><span>Главная</span></a></li>
<li id="item-468"><a href="/special2/index.php/produkty-dlya-sportsmenov" ><span><img src="/special2/images/icons/menu1.png" alt="Продукты для спортсменов" align="left" />Продукты для спортсменов </span></a></li>
<li id="item-470"><a href="/special2/index.php/dieticheskie-produkty-pitaniya" ><span><img src="/special2/images/icons/menu3.png" alt="Диетические продукты питания" align="left" />Диетические продукты питания </span></a></li>
<li id="item-471"><a href="/special2/index.php/detskie-produkty-pitaniya" ><span><img src="/special2/images/icons/menu4.png" alt="Детские продукты питания" align="left" />Детские продукты питания </span></a></li>
<li id="item-469"><a href="/special2/index.php/koshernye-produkty-pitaniya" ><span><img src="/special2/images/icons/menu2.png" alt="Кошерные продукты питания" align="left" />Кошерные продукты питания </span>
</a></li><li id="item-478"><a href="/special2/index.php/produkty-dlya-diabetikov" ><span><img src="/special2/images/icons/menu5.png" alt="Продукты для диабетиков" align="left" />Продукты для диабетиков </span></a></li></ul>					</div>
				</div>
			</div>
		</div>
		<div class="top">


<ul class="menu" id="mergen">
<li id="item-473" class="current active"><a href="/special2/index.php/vse-kompanii" ><span>Все компании</span></a></li><li id="item-474"><a href="/special2/index.php/gde-kupit" ><span>Где купить</span></a></li><li id="item-475"><a href="/special2/index.php/vse-o-pitanii" ><span>Все о питании</span></a></li><li id="item-476"><a href="/special2/index.php/retsepty" ><span>Рецепты</span></a></li></ul>
		</div>

[everytime]

#mergen a:hover,a:active,a:focus

В этой строке ошибка, при фокусе СSS для #mergen распространяется на все теги а.

Надо сделать так:

#mergen a:hover,#mergen a:active,#mergen a:focus

Edited October 28, 2012 by everytime