Проблема с меню(css sprites)

[Kup]

Вот образец меню. Вроде как всё работает, но в нем используется 12 изображений:

и т.д под каждый пункт и выпадающую менюшку, т.е. ради меню посылается 12 запросов на сервер для загрузки картинки, по одному на каждую кнопку(учитывая выпадающие). Я захотел чуток усовершенствовать его и переделать его под один спрайт, чтобы на меню был 1 запрос.

Вот сам спрайт:

И наконец результат полученный после 5 часового мучения...что происходит: всё выскакивает под нужным пунктом но с лихвой)))

например если при наведении на ABOUT должен был выпадать пункт DISTINCTIVE, то сейчас выпадает HOME, DISTINCTIVE. При наведении на WHAT WE DO должно выпадать 3 подменю: STRATEGY, LOGISTICS, GLOBAL ENERGY DIVISION а выпадает HOME, ABOUT, STRATEGY, LOGISTICS, GLOBAL ENERGY DIVISION. Ну и при наведении на NEWS должно выпадать BROCHURE а выпадает HOME, ABOUT, WHAT WE DO, PRODUCTS, THE ENVIRONMENT, BROCHURE.

Такие дела, уже не знаю что менять и как бороться, надеюсь у кого-то будут какие-то идеи как всё поправить.

Вот проблемная таблица:

* {
	outline:none;
	margin:0px;
	padding:0px;
}

body {
	margin:0px;
	padding:0px;
	background-color:#F8f8f8;
}

#container {
	width:420px;
	text-align:left;
	margin: 5px auto;
	position:relative;
	background:#f8f8f8;
	border:1px solid black;
}

#navigation {
	height:36px; /* поправить, это контейнер для списка, был 18px */
	border:1px solid black;
}




#aboutspace{
width:41px;
}

#whatspace{
width:88px;
}

#newsspace{
width:320px;
}

#navigation li span{
	display:none;
}




#navbar li ul {
	cursor:default;
	position:absolute;
	height:18px;
	top:18px;
	left:-9999px;
}


ul#navbar {
	width:420px;
	list-style:none;
}

ul#navbar li {
	display:inline;
}

#navbar li:hover ul, #navbar li.msieFix ul {
	left:0px;
	z-index:10px;
}

ul#navbar li a{
	float:left;
	height:18px;
	background-image:url(SPRITE.png);
	background-repeat:no-repeat;
	text-indent: -9999px;
}

ul#navbar li a.home {
	width:41px;
	background-position:0px 0px;
}

ul#navbar li a.home:hover {
	background-position:0px -18px;
}

body#homepage ul#navbar li a.home {
	background-position:0px -36px;
}

ul#navbar li a.about {
	width:45px;
	background-position:-41px 0px;
}

ul#navbar li a.about:hover {
	background-position:-41px -18px;
}

body#aboutpage ul#navbar li a.about {
	background-position:-41px -36px;
}

ul#navbar li a.whatwedo {
	width:72px;
	background-position:-86px 0px;
}

ul#navbar li a.whatwedo:hover {
	background-position:-86px -18px;
}

body#whatwedopage ul#navbar li a.whatwedo {
	background-position:-86px -36px;
}

ul#navbar li a.products {
	width:63px;
	background-position:-158px 0px;
}

ul#navbar li a.products:hover {
	background-position:-158px -18px;
}

body#productspage ul#navbar li a.products {
	background-position:-158px -36px;
}

ul#navbar li a.theenvironment {
	width:100px;
	background-position:-221px 0px;
}

ul#navbar li a.theenvironment:hover {
	background-position:-221px -18px;
}

body#theenvironmentpage ul#navbar li a.theenvironment {
	background-position:-221px -36px;
}

ul#navbar li a.news {
	width:41px;
	background-position:-321px 0px;
}

ul#navbar li a.news:hover {
	background-position:-321px -18px;
}

body#newspage ul#navbar li a.news {
	background-position:-321px -36px;
}

ul#navbar li a.contact {
	width:55px;
	background-position:-362px 0px;
}

ul#navbar li a.contact:hover {
	background-position:-362px -18px;
}

body#contactpage ul#navbar li a.contact {
	background-position:-362px -36px;
}

ul#navbar li a.distinctive {
	width:69px;
	background-position:-417px 0px;
}

ul#navbar li a.distinctive:hover {
	background-position:-417px -18px;
}

body#distinctivepage ul#navbar li a.distinctive {
	background-position:-417px -36px;
}

ul#navbar li a.strategy {
	width:59px;
	background-position:-486px 0px;
}

ul#navbar li a.strategy:hover {
	background-position:-486px -18px;
}

body#strategypage ul#navbar li a.strategy {
	background-position:-486px -36px;
}

ul#navbar li a.logistics {
	width:61px;
	background-position:-545px 0px;
}

ul#navbar li a.logistics:hover {
	background-position:-545px -18px;
}

body#logisticspage ul#navbar li a.logistics {
	background-position:-545px -36px;
}

ul#navbar li a.globalenergydivision {
	width:130px;
	background-position:-606px 0px;
}

ul#navbar li a.globalenergydivision:hover {
	background-position:-606px -18px;
}

body#globalenergydivisonpage ul#navbar li a.globalenergydivision {
	background-position:-606px -36px;
}

ul#navbar li a.brochure {
	width:65px;
	background-position:-736px 0px;
}

ul#navbar li a.brochure:hover {
	background-position:-736px -18px;
}

body#brochurepage ul#navbar li a.brochure {
	background-position:-736px -36px;
}

[rus]

А зачем такое меню спрайтами? Не проще было текстом, а не картинками?

[Kup]

мне знания не позволяют) не видел подобного текстового меню в уроках, попадались только вертикально выпадающие подпункты

[rus]

мне знания не позволяют) не видел подобного текстового меню в уроках, попадались только вертикально выпадающие подпункты

То есть перелопатить это меню под ваши условия вам знаний хватило?

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

Edited December 16, 2009 by rus

[Justnewone]

мне знания не позволяют) не видел подобного текстового меню в уроках, попадались только вертикально выпадающие подпункты

Зачем картинками? Ведь вроде как можно бордерами и текстом. Шрифт не ахти какой.

На интуитивном уровне, мне кажется, потому что в строчное блочное вставляется. Тут может быть проблема.

[Kup]

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

[Justnewone]

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

Код не самый удачный, честно говоря.

Как образец имеет 2 слабые стороны.

Как уже писал, блочное в строчном и второй момент - превращение вертикали в горизонталь с помощью того же инлайна. Надо все писать без пробелов и переносов, единой строкой или ждите разночтений 100%.

сейчас самым кроссбрауерным такое меню будет на флоатах.

Ну. я правда всегда IE6 имею ввиду, если без него, можно чуток попроще.