Здравствуйте. Создаю меню для сайта, опыта в CSS нет никакого, поэтому бьюсь уже около недели, постепенно изучая информацию. Итак суть проблемы. Нужно меню чисто на CSS (не считая скрипта для IE). Разделы меню естественно, имеют разные размеры. Я хочу чтобы при наведении на пункт меню, он выделялся соответствующим образом(см.ссылку). http://truman14.ucoz.ru/bkack_menu.html Но проблема в том, что это самое выделение, как мне видится, состоит из трех отдельных картинок (скругление левой части, центральная часть и правая). Вот я и не могу разобраться каким образом мне соединить эти три картинки. С помощью классов я, конечно, могу присвоить каждой ссылке свое изображение, не разбивая его на три части, но тем самым увеличится загрузка страницы (что на сегодняшний день, в принципе, не критично, но все же). Пока что я оставил этот вариант, для примера с помощью класса выделил пункт "Недвижимость" Пробовал добиться этого с помощью DIV'ов, но не получилось. <body> <ul id="hmenu"> <li><a href="#">Наш город</a> <ul> <li><a class="her" href="#">Галереи</a></li> <li><a class="her" href="#">Примечательности</a></li> </ul> </li> <li class="second"><a calss="second" href="#">Недвижимость</a></li> <li><a href="#">Досуг и отдых</a> <ul> <li><a class="her" href="#">Group #1</a></li> <li><a class="her" href="#">Group #2</a></li> <li><a class="her" href="#">Group #3</a></li> <li><a class="her" href="#">Group #4</a></li> <li><a class="her" href="#">Group #5</a></li> </ul> </li> <li><a href="#">Рестораны/Кафе</a> <ul> <li><a class="her" href="#">Download center</a></li> <li><a class="her" href="#">FAQ</a></li> </ul> </li> <li><a href="#">Авто</a> <ul> <li><a class="her" href="#">Download center</a></li> <li><a class="her" href="#">FAQ</a></li> </ul> </li> </ul> <p>Water, bread and batteries disappeared from store shelves. Lines formed at the pump. From Florida to Maine, residents were told to brace for flash flooding and power outages.</p> <p>Hundreds of miles south, Irene swirled through the Caribbean, giving a glimpse of what was to come. Homes were inundated with water, residents took refuge in schools and churches, and more than a million people were without electricity. One woman was killed in Puerto Rico.</p> </body> Ну а это собственно сам CSS код: body{ margin: 0; padding:0; } ul#hmenu { margin: 0; border: 0 none; padding: 0; list-style: none; background:url(images/green_fon.png)repeat-x; height: 41px; /*высота полосы меню*/ font: bold 12px/31px Tahoma, Arial, Helvetica, sans-serif; text-transform:uppercase; } ul#hmenu li { margin: 0; border: 0 none; padding: 0; float: left; display: inline; list-style: none; position: relative; height: 20px; /*высота полосы подменю*/ } ul#hmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 41px; left: 0; } ul#hmenu ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#hmenu ul li { width: 160px; float: left; display: block !important; display: inline; } /* Main Menu */ ul#hmenu a { border: 0px; padding: 0 20px; float: none !important; float: left; display: block; background: url(images/12344.png)no-repeat left; color: #fff; font: bold 12px/31px Tahoma, Arial, Helvetica, sans-serif; text-decoration: none; height: 41px !important; height: 1%; } ul#hmenu a.her { border: 0px; padding: 0 6px; float: none !important; float: left; display: block; background: #565766; color: #b2ff00; font: bold 12px/28px Tahoma, Arial, Helvetica, sans-serif; text-transform:none; text-decoration: none; height: auto !important; height: 1%; } /* Main Menu Hover */ ul#hmenu a:hover, ul#hmenu li:hover a{ background:url(images/fon_hover.png) no-repeat center; color: #FFFFFF; } ul#hmenu a.second:hover, ul#hmenu li.second:hover a{ background:url(images/1234.png) no-repeat center; color: #FFFFFF; } /* Second Menu */ ul#hmenu li:hover li a, ul#hmenu li.iehover li a { border-top: 1px solid #FFFFFF; float: none; font: 12px/20px Tahoma, Arial, Helvetica, sans-serif; background: url(images/fon_second_menu.png); color: #FFFFFF; } /* Second Menu Hover */ ul#hmenu li:hover li a:hover, ul#hmenu li:hover li:hover a, ul#hmenu li.iehover li a:hover, ul#hmenu li.iehover li.iehover a { border-top: 1px solid #FFFFFF; background: #808298; color: #FFFFFF; } ul#hmenu ul ul { display: none; position: absolute; top: 0; left: 160px; } ul#hmenu li:hover ul ul, ul#hmenu li.iehover ul ul { display: none; } ul#hmenu li:hover ul, ul#hmenu ul li:hover ul, ul#hmenu li.iehover ul, ul#hmenu ul li.iehover ul { display: block; } Заранее спасибо за помощь, хотелось бы создать меню с помощью трех изображений, которые автоматически подгонялись бы под пункты меню, а не из 10 картинок. Кстати на счет ДИВов. Я делал так: <div class="box"> <ul id="hmenu"> <div class="left"><div class="center"><div class="right"> <li><a href="#">Наш город</a> <ul> <li><a class="her" href="#">Галереи</a></li> <li><a class="her" href="#">Примечательности</a></li> </ul> </li> </div></div></div> <li class="second"><a calss="second" href="#">Недвижимость</a></li> <li><a href="#">Досуг и отдых</a> <ul> <li><a class="her" href="#">Group #1</a></li> <li><a class="her" href="#">Group #2</a></li> <li><a class="her" href="#">Group #3</a></li> <li><a class="her" href="#">Group #4</a></li> <li><a class="her" href="#">Group #5</a></li> </ul> </li> <li><a href="#">Рестораны/Кафе</a> <ul> <li><a class="her" href="#">Download center</a></li> <li><a class="her" href="#">FAQ</a></li> </ul> </li> <li><a href="#">Авто</a> <ul> <li><a class="her" href="#">Download center</a></li> <li><a class="her" href="#">FAQ</a></li> </ul> </li> </ul> Ну и соответственно в коде CSS описывал каждый класс (left, center, right) Наверняка я что-то конкретно недопонимаю, поэтому прошу вашей помощи
