http://forum.htmlbook.ru/index.php?showtopic=20993 СПАСИБО ДРУЖИЩЕ ПОМОГЛО !!! Следом возникает следующий вопрос: посмотрите на скрин, там увидите что последняя ссылка в меню ставит за собой бордер, который я прописывал для всех ссылок, как растянуть меню во всю ширину блока что бы было все ровно? код: <ul id="menu"> <li><a class="active" href="#">Главная</a></li> <li><a href="#">Виды спорта</a></li> <li class="treg"><a id="current" href="#">Чемпионаты</a> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Видеообзоры</a></li> <li><a href="#">Телепрограммы</a></li> <li><a href="#">Спортивные каналы</a></li> <li><a href="#">Программа</a></li> </ul> </li> <li class="treg"><a href="#">Трансляции</a> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Видеообзоры</a></li> <li><a href="#">Телепрограммы</a></li> <li><a href="#">Спортивные каналы</a></li> <li><a href="#">Программа</a></li> </ul> </li> <li><a href="#">Видеообзоры</a></li> <li class="treg"><a href="#">Телепрограммы</a> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Видеообзоры</a></li> <li><a href="#">Телепрограммы</a></li> <li><a href="#">Спортивные каналы</a></li> <li><a href="#">Программа</a></li> </ul> </li> <li ><a href="#">Спортивные каналы</a></li> <li class="men"><a href="#">Программа</a></li> </ul> <ul id="menu2"> <li><a class="active" href="#"> <span class="rus">Россия</span></a></li> <li><a href="#"><span class="fra">Франция</span></a></li> <li><a href="#"><span class="ang">Англия</span></a></li> <li ><a href="#"><span class="ger">Германия</span></a></li> <li ><a href="#"><span class="isp">Испания</span></a></li> </ul> CSS: /* Главное меню */ #menu { width:100%; height:48px; list-style: none; background: url(img/bg_menu.jpg); margin:7px auto ; } #menu li { float: left; padding:0; position: relative; } #menu a { border-right: 1px solid #1a1a1a; border-left: 1px solid #3f3f3f; float: left; padding:0 21px 0 22px; color: #e9b043; font: bold 11px/48px Tahoma, Geneva, sans-serif; text-decoration: underline; text-shadow: 0 1px 0 #000; } #menu a:link.active, #menu a:visited.active, #menu a:hover { background:#252525; color:#5f961e;} #menu li:hover > a { color: #5f961e; background: transparent; background-color:#252525; } *html #menu li a:hover /* IE6 */{ color: #5f961e; background: transparent; background-color:#252525; } #menu li:hover > ul { display: block; } #menu .nobullet { background-image: none; /* Прячем рисунок */ padding-left: 5px; /* Изменяем поле слева */ } #menu ul a { background-image: none; /* Для подпунктов рисунок убираем */ height: 1%; /* Для IE7 устанавливаем hasLayout */ } /* Подменю */ #menu ul{ list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 48px; left: 0; z-index: 99999; background: #252525; background-color: rgba(42,42,42,0.90); /*полупрозрачный фон меню*/ filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#90252525,endColorstr=#90252525);/*для ие*/ } #menu ul li { float: none; margin: 0; padding: 0; display: block; } #menu ul li:last-child {} #menu ul a { padding:0px 60px 0px 20px; height: auto; line-height: 2; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a /* IE6 */{ height: 10px; width: 150px; } *:first-child+html #menu ul a /* IE7 */{ height: 10px; width: 150px; } #menu .treg a:hover{ background-image:url(img/treg_act.png); background-repeat:no-repeat; background-position: 55% 79% ;} #menu .treg ul a:hover { background-image: none; /* Для подпунктов рисунок убираем */} #menu ul li:first-child a {} #menu ul li:first-child a:after { } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul li:last-child a {} #menu:after {} * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ .treg { background-image: url(img/treg.png); background-repeat:no-repeat; background-position: 55% 77% ; } /* Главное меню */
