Меню LI

[oscora]

Доброго времени суток!

В очередной раз зашёл в тупик и вынужден просить Вашей помощи.

Проблема заключается в том, что при графическом строительстве менюшки, я столкнулся с проблемой визуализации некой графики, а именно с "hover" отображением.

делаю меню. назначаю "LI" делать отделение ссылок 2-х пиксельной полосочкой. назначаю "LI:hover" отображать другую картинку при наведение мышки и вот тут и начинаеться баг. или даже возможно кривизна моих рук. При наведение на ссылку, срабатывает "LI:hover" и тем самым, убирает полность визуализацию "LI", а именно ту саму, разделительную полосочку в 2 пикселя. измучился весь, самостоятельно не могу найти выход из ситуации.

Код прилогаю.

CSS:

#menu {  background: url(../img/men_bg.png) repeat-x; width: 662px; height: 22px; margin: 165px 0 0 275px
      }
#menu .left { background: url(../img/men_l.png) no-repeat left 0%;
            }
#menu .right { background: url(../img/men_r.png) no-repeat right 0%; height: 22px
             }
#menu li { position: relative; padding-bottom: 5px; padding-left: 36px; padding-right: 36px; display: inline; background: url(../img/men_li.png) no-repeat right 1px; float: left; padding-top: 0px;
         }
#menu li a{ display:block;
          }
#menu li:hover { background: url(../img/men_li_h.png) no-repeat right 0px;
              }
#menu li.jshover { background: url(../img/men_li_h.png) no-repeat right 0px;
                }
#menu a { font: bold 12px/25px arial; color: #fff; text-decoration: none; text-shadow: 0 1px 0 #005d95;
        }

HTML:

          <div id="menu">
                           <div class="left">
                              <div class="right">

<li><a href="" title="">Главная</a></li>
<li><a href="" title="">Услуги</a></li>
<li><a href="" title="">Тарифы</a></li>
<li><a href="" title="">Контакты</a></li>

                  </div>
                     </div>
                           </div>

З.Ы - Так же не могу понять как подсунуть в первую кнопку левый бордюр так, что бы при наведении мышкой, "LI:hover" тоже не скрывал его..

[mrnobody]

А можно было в архив выложить и чтобы в нем еще изображения были?

А то не понятно в чем вам нужно помочь:

Edited May 12, 2012 by mrnobody

[oscora]

ок.

сейчас сделаю.

надеюсь на форуме разрешено бросать ссылки.

Кстати со второй проблемой разобрался

http://81.200.23.210/a/fil/menu.rar

[alexforce2]

Двух пиксельная картинка men_li.png исчезает потому что вы заменяете её картинкой men_li.png в блоке #menu li. Вот нужный вам код CSS:

#menu {  
	background: url(../img/men_bg.png) repeat-x; 
	width: 662px; 
	height: 22px;
}
#menu .left {
	background: url(../img/men_l.png) no-repeat left 0%;  
	padding-left: 8px;
}
#menu .right { 
	background: url(../img/men_r.png) no-repeat right 0%; 
	height: 22px; 
	padding-right: 8px;
}
#menu li { 
	position: relative; 
	display: inline; 
	background: url(../img/men_li.png) no-repeat right 1px; 
	float: left;
}
#menu li a{ 
	display:block;
	padding-top: 0px;
	padding-bottom: 5px; 
	padding-left: 36px; 
	padding-right: 34px; 
	margin-right:2px;
}
#menu a:hover { 
	background: url(../img/men_li_h.png) no-repeat right 0px;
}
#menu li.jshover {
	background: url(../img/men_li_h.png) no-repeat right 0px;
}
#menu a { 
	font: bold 12px/25px arial; 
	color: #fff; 
	text-decoration: none; 
	text-shadow: 0 1px 0 #005d95;
}

Выкладывайте, пожалуйста, отформатированный код, а то неудобно разбираться.

Edited May 13, 2012 by alexforce2

[oscora]

Спасибо огромное! Значит это я просто критин и не туда параметры отступа прописывал... А то ведь тоже пробовал делать отступ с права в 2 пикселя и это нечего не давало.