Yardım edin lütfen. Css Hatası.

Merhaba arkadaşlar, düzeltilmesi gereken bir css hatam mevcut. Ne yaptıysam başarılı olamadım. Wordpress için tema yapıyorum. Sidebar kısmında bir sorun mevcut.

Mouse ile üstüne gelindiğinde kırmızı arkaplana sahip olan hoverlı bir menu yapmaya çalıştım.

Normal css kodları ile bunu başarabiliyorum. Şu Şekilde;

Olması Gereken ve Wordpress'e entegre etmediğimde düzenli çalışan hali;

	
/**Css Kodları **/
.kat {width:155px; height:600px; margin-top:3px; float:left;}
.kategori {width:155px;}
.kategori li{height:24px; background: #535355 url('resim/katbg.png') no-repeat; margin-top:2px;}
.kategori li h1 {font-size:13px; padding:6px; padding-left:27px; color: #FFF;}
.kategori li h1:hover {background: #aa0505 url('resim/katbg.png') no-repeat;}

/** Div Kodları**/
<div  class="kat">
<ul class="kategori">
<li><a href="#"><h1>Aksiyon Oyunları</h1></a></li>
<li><a href="#"><h1>Beceri Oyunları</h1></a></li>
<li><a href="#"><h1>Giydirme Oyunları</h1></a></li>
<li><a href="#"><h1>Makyaj Oyunları</h1></a></li>
<li><a href="#"><h1>Dövüs Oyunları</h1></a></li>
</ul></div>

Wordpress'e Entegre ettiğimde gerekli kategorileri çıkarması için php kodunu eklediğimde ise şöyle gözüküyor;


Css kodları aynı, wordpress için eklediğim kod ise aşağıdaki şekildedir.

<div class="kat">
<ul class="kategori">
<li><h1><?php wp_list_categories('orderby=name&child_of=0&title_li='); ?></h1></li>
</ul></div>

Lütfen yardımcı olun kaç gündür delirdim Teşekkürler.

wordpress'te bu kategorilerinizi çağırırken aşağıdaki şekilde gelir. dolayısıyla sizin yazdığın css kodlarıyla karışır. onun için aşağıdaki yazdığım koda göre düzenleme yaparsanız. düzgün bir şekilde çalışır.



<li class="cat-item cat-item-numarasi"><a href="ana kategori link" title="ana kategorisi altındaki tüm yazıları göster">X KATEGORİSİ</a>
<ul class="children">
<li class="cat-item cat-item-numarasi"><a href="alt kategori link" title="alt kategorisi altındaki tüm yazıları göster">AL kategori</a>
</li>

</ul>
</li>

Olması gereken html yapısı
<li><a href="#"><h1>Aksiyon Oyunları</h1></a></li> 

Wp tarafında hatalı oluşturulan html yapısı
<li><h1><a href="#">Aksiyon Oyunları</a></h1></li>

Tüm linklere H1 atamasan onun yerine site veya sayfa başlığında kullansan H1'i daha iyi olur, seo açısından spam olarak algılanabilir.

Aşağıdaki linkte bir örnek hazırladım, isterseniz kullanabilirsiniz.
http://jsfiddle.net/maQaZ/

h1'leri kaldırınca sadece li'ler ile kullanınca sorunum düzeldi arkadaşlar, teşekkürler