Menu Item posunutí – CSS – Fórum – Programujte.com

Zdravím

Dělám menu na jedny stránky a nastal takový problém, který už 2 hodiny nemohu rozluštit.

Když najedu na 1. položku menu (jen a:hover), tak se celé menu i s pozadím názvu menu posune o pár pixelů doprava. Když na to kliknu všechno zůstane stejné jako když jsem najel akorát pozadí se změní jak to mám nastavené když jsem na aktuální stránce. Když jsem na té stráce pořád a najedu znovu na položku 1 v menu, tak se mi to zase posune o pár pixelů doprava ale tohle jen když najedu na to menu. Podobný problém mám u všech položek menu akorát u jednoho se mi to posune doleva a u dalšího doprava.

Menu Archiv nefunguje zatím...nemám tam daný odkaz na stránku.

web je nahozený na: http://apk-market.tk

 Zde CSS menu:

#games
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 50px;
	font-family:"myriad pro semibold";
	font-size: 16px;	
	display: inline;
}
#games a
{
	text-decoration: none;
	color: black;
	background-color: transparent;
	border-radius: 2px;
}
#games a:hover
{
	border-radius: 2px;
	background-color: #e4e4e4;
	padding: 5px 5px;
}
#menu #games.active
{
	color: white;
	border-radius: 2px;
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
}
#menu #games.active a
{
	color: white;
}
#menu #games.active a:hover
{
	border-radius: 2px;
	background-color: transparent;
}
#apps
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 35px;
	font-family:"myriad pro semibold";
	font-size: 16px;
	display: inline;
}
#apps a
{
	text-decoration: none;
	color: black;
	padding: 5px 5px;
	background-color: transparent;
	border-radius: 2px;
}
#apps a:hover
{
	border-radius: 2px;
	background-color: #e4e4e4;
}
#menu #apps.active
{
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
	border-radius: 2px;
	color: white;
}
#menu #apps.active a
{
	color: white;
}
#menu #apps.active a:hover
{
	border-radius: 2px;
	background-color: transparent;
}
#live_wallpapers
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 35px;
	font-family:"myriad pro semibold";
	font-size: 16px;
	display: inline;
}
#live_wallpapers a
{
	text-decoration: none;
	color: black;
	padding: 5px 5px;
	background-color: transparent;
	border-radius: 2px;
}
#live_wallpapers a:hover
{
	background-color: #e4e4e4;
	border-radius: 2px;
}
#menu #live_wallpapers.active
{
	border-radius: 2px;
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
	color: white;
}
#menu #live_wallpapers.active a
{
	color: white;
}
#menu #live_wallpapers.active a:hover
{
	border-radius: 2px;
	background-color: transparent;
}
#themes
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 35px;
	font-family:"myriad pro semibold";
	font-size: 16px;
	display: inline;
}
#themes a
{
	text-decoration: none;
	color: black;
	padding: 5px 5px;
	background-color: transparent;
	border-radius: 2px;
}
#themes a:hover
{
	background-color: #e4e4e4;
	border-radius: 2px;
}
#menu #themes.active
{
	border-radius: 2px;
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
	color: white;
}
#menu #themes.active a
{
	color: white;
}
#menu #themes.active a:hover
{
	background-color: transparent;
	border-radius: 2px;
}
#archive
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 25px;
	font-family:"myriad pro semibold";
	font-size: 16px;
	display: inline;
}
#archive a
{
	text-decoration: none;
	color: black;
	padding: 5px 5px;
	background-color: transparent;
	border-radius: 2px;
}
#archive a:hover
{
	background-color: #e4e4e4;
	border-radius: 2px;
}
#menu #archive.active
{
	border-radius: 2px;
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
}
#menu #archive.active a
{
	color: white;
}
#menu #archive.active a:hover
{
	background-color: transparent;
}

Nějaké nápady co to může způsobovat? 

Děkuji 

Jestli to fakt nevidíš, tak při :hover tam přidáváš

    padding: 5px 5px;

kterej tam normálně není...

proto se ti to rozšíří...

To vím, ale když odstraním padding tak je to "šedívé pozadí" jen těsně okolo textu toho games a já to potřebuju mít o těch 5px rozšířené do stran, nahoru i dolu. A když tam padding je, tak to dělá ten paskvil.

JoDiK ti chtel naznacit, ze tam to padding mas dat i bez hoveru. Hoverem se tam pak zmeni uz jen to pozadi.

Mimochodem, pri tom hoveru tam neni dostatecny kontrast pozadi text, neda se to precist.
Jako pomucku muzes pouzit treba tady tohle.
http://mlich.zam.slu.cz/js-color4.htm
Kdyz tam zadas do toho prvniho policka nahore e4e4e4, tak hned pod tim vykresli sedy obdelnicek s cernou barvou. Coz znamena, ze pro to pozadi musis pouzit tmavou barvu pisma. Ten program neni 100%, ale zatim mi to celkem vyhovuje. Pokud najdu problem, tak ho pozmenim.