Здравствуйте. У меня такой вопрос. В горизонтальное меню сайта http://stylishjewel.ru/ вставил несколько своих разделов. Все вроде бы нормально, но в таких браузерах, как firefox и maxton при масштабировании страницы, крайний раздел "Драгоценные металлы и камни" съезжает вниз за пределы меню. Код: <?php $this->load->model('catalog/category'); $this->load->model('tool/image'); $categories_1 = $this->model_catalog_category->getCategories(0); if ($categories_1) {$output = '<ul>';} $output .= '<li class="tlli"></li>'; foreach ($categories_1 as $category_1) { $output .= '<li class="tlli">'; $testPath = $base.'image/'; $picCat = $this->model_tool_image->resize($category_1['image'], 190, 190); $unrewritten = $this->url->link('product/category', 'path=' . $category_1['category_id']); $output .= '<a class="tll" href="'.($unrewritten).'"> ' . $category_1['name'] . ' </a>'; $categories_2 = $this->model_catalog_category->getCategories($category_1['category_id']); if ($categories_2) {$output .= '<div class="bigdiv" style="margin-left: 0px"><div class="supermenu-left" style="width: 958px;">';} foreach ($categories_2 as $category_2) { $subTestPath = $base.'image/'; if ($category_2['image']) { $picSubCat = $this->model_tool_image->resize($category_2['image'], 80, 80); } else { $picSubCat = $base.'image/no_image-menu.jpg'; }; $output .= '<div class="withchild">'; $sub_unrewritten = $this->url->link('product/category', 'path=' . $category_1['category_id'] . '_' . $category_2['category_id']); $output .= '<div class="box-name"><div><a href="'.($sub_unrewritten).'"><img align="middle" style="padding-right:2px; float:left;" src="'.$picSubCat.'" alt="' . $category_2['name'].'"/></a></div> <div><a class="theparent" href="'.($sub_unrewritten).'"><span>' . $category_2['name'] . '</span></a></div></div>'; $categories_3 = $this->model_catalog_category->getCategories($category_2['category_id']); if ($categories_3) {$output .= '<ul class="child-level">';} $cc_i = 0; foreach ($categories_3 as $category_3) { $output .= '<li>'; $cc_i++; if ($cc_i >=8) { break; } $third_sub_unrewritten = $this->url->link('product/category', 'path=' . $category_1['category_id'] . '_' . $category_2['category_id'] . '_' . $category_3['category_id']); $output .= '<a href="'.($third_sub_unrewritten).'">'.$category_3['name'].'</a>'; $output .= '</li>'; } if ($categories_3) {$output .= '</ul>';} if ($cc_i >= 8) $output .= '<a href="'.($sub_unrewritten).'" class="more">Еще...</a>'; $output .= '</div>'; } if ($categories_2) {$output .= '</div></div>';} $output .= '</li>'; } $output .= '<li class="tilli"><a class="tll-home" href="http://stylishjewel.ru/opredelenie-razmera-koltsa/"> Размер кольца </a></li>'; $output .= '<li class="tilli"><a class="tll-home" href="http://stylishjewel.ru/opredelenie-raznitsy-mezhdu-tsepochkami/"> Определение разницы между цепочками </a></li>'; if ($categories_1) {$output .= '</ul>';} echo $output; {$output = '<ul>';} $output .= '<li class="tlli"></li>'; { $output .= '<li class="tlli">'; /*$output .= '<a class="tll" style="border-right: none"> Драгоценные металлы и камни</a>';*/ $output .= '<li class="tilli"><a class="tll-home" style="border-right: none" href="http://stylishjewel.ru/dragocennye-metally-i-kamni/"> Драгоценные металлы и камни</a></li>'; {$output .= '<div class="bigdiv" style="left: 748px; width: 150px; padding: 10px 10px 10px 10px;">';} /*{ $output .= '<div><div></div> <div class="left" style="margin-right: 150px; display: block; float: left;"> <a href="index.php?route=information/information&information_id=8" class="content"><br>Золото</br></a> <a href="index.php?route=information/information&information_id=7" class="content"><br>Серебро</br></a> <a href="index.php?route=information/information&information_id=6" class="content"><br>Платина</br></a> <a href="index.php?route=information/information&information_id=5" class="content"><br>Алмаз</br></a></div> <div class="right" style="margin-left: 150px; display: block; float: left; margin-top: -117px;"> <a href="index.php?route=information/information&information_id=4" class="content"><br>Изумруд</br></a> <a href="index.php?route=information/information&information_id=3" class="content"><br>Жемчуг</br></a> <a href="index.php?route=information/information&information_id=2" class="content"><br>Опал</br></a> <a href="index.php?route=information/information&information_id=1" class="content"><br>Гранат</br></a></div></div>'; $output .= '</div>'; }*/ } echo $output; ?> css: Код: /* SLMENU */ #slmenu { background: url('/catalog/view/theme/stylishjewel/image/menu.jpg') no-repeat; height: 50px; text-align:center; border-radius: 5px 5px 5px 5px; -webkit-box-shadow: 0px 2px 2px #DDDDDD; -moz-box-shadow: 0px 2px 2px #DDDDDD; box-shadow: 0px 2px 2px #DDDDDD; padding: 6px 10px 6px 10px; margin: 1px auto 25px; width: 980px; z-index:100; } #slmenu ul { list-style: none outside none; margin: 0px; padding: 0px; } #slmenu ul li.tlli { border: medium none currentColor; display: block; float: left; padding: 0px 0px 0px 1px; position: relative; text-align: left; } #slmenu ul li.tlli:hover { background: #000; transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0; } #slmenu ul li a.tll { //border-left: 1px solid #979797; border-right: 1px solid #979797; color: #FFFFFF; display: table-cell; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; height: 36px; overflow-wrap: normal; padding: 0px 5px; position: relative; text-decoration: none; vertical-align: middle; text-shadow: 0px 0px 1px rgb(17, 17, 17); text-align: center; //width: 117px; z-index: 6; } #slmenu ul li a.tll-home { //border-left: 1px solid #979797; border-right: 1px solid #979797; color: #FFFFFF; display: table-cell; font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; height: 36px; overflow-wrap: normal; padding: 0px 5px; position: relative; text-decoration: none; vertical-align: middle; text-shadow: 0px 0px 1px rgb(17, 17, 17); text-align: center; //width: 117px; z-index: 6; } #slmenu ul li div.bigdiv { background: #FFFFFF; //border-top: 7px solid #9F9F9F; border-radius: 7px 7px 7px 7px; box-shadow: 0px 3px 3px #666666; transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0; display: none; position: absolute; z-index: 5; padding: 10px 5px 5px 5px; width: 960px; z-index:10000; } #slmenu ul li.tlli.act div.bigdiv { display: table; } #slmenu ul li.tlli.act:after { content: ""; position: absolute; border-left: 10px solid rgba(255, 241, 190, 0); border-right: 10px solid rgba(255, 241, 190, 0); border-bottom: 10px solid #fff; left: 40%; top: 28px; } #slmenu ul li div .supermenu-left { display: inline-block; float: left; vertical-align: top; z-index: 9999; } #slmenu ul li div .withchild { display: inline-block; z-index: 10; padding: 5px 10px 5px 5px; border: 1px solid #fff; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; background: #fff; box-shadow: 0 3px 4px white; left: 0; top: 34px; box-shadow: 0 3px 4px white; } #slmenu ul li div .withchild:hover{ border: 1px solid #333333; -moz-box-shadow: 0 0 3px rgba(50,157,247,.5); -webkit-box-shadow: 0 0 3px rgba(50,157,247,.5); box-shadow: 0 0 3px rgba(50,157,247,.5); } #slmenu ul li div .cat-logo { width: 100px; padding: 5px; min-height:230px; float: left; margin:0 0 5px 0; display:block; } #slmenu ul li div .cat-logo img { float:left; margin:0 10px 0 0; } #slmenu ul li div .cat-logo a { color: #000; display: table-cell; font-family: Arial,Helvetica,sans-serif; font-size: 13px; //font-weight: 700; text-decoration: none; text-align: center; //text-shadow: 1px 1px 1px #333333; } #slmenu ul li div .box-name {display:block;top: 50%;} #slmenu > ul > li > div > ul { display: table-cell; } #slmenu > ul > li ul + ul { padding-left: 20px; } #slmenu ul li div .withchild ul.child-level li a { color: #000; display:block; left: 10px; min-width: 40px; padding: 3px 3px 3px 3px; text-decoration: none; font-size: 11px; border: 1px solid #fff; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } .child-level li a:visited { color: #b7b7b7; } #slmenu ul li div .withchild ul.child-level li a:hover { color: #979797; text-decoration: none; border: 1px solid #000; } #slmenu ul li div .menu-add { width: 200px; margin-left: 5px; height: 100%; overflow: hidden; float: right; vertical-align: bottom; display: inline-block; } #slmenu ul li div .menu-add img { float: right; margin-top: 10px; } #slmenu ul li div .withoutchild { display: block; margin-top: 5px; } #slmenu ul li div .withoutchild .withchild { display: inline-block; margin-left: 10px; width: 220px; margin-top: 10px; } #slmenu ul li div .withoutchild .withchild a { font-size: 13px; color: #38B0E3; text-decoration: none; vertical-align: top; } #slmenu ul li div .withchild { display: inline-block; width: 220px; margin-left: 10px; /*border: 1px solid #393939;*/ margin-top: 10px; vertical-align: top; } #slmenu ul li div .withchild ul.child-level li + li { /*border-top: 1px dashed #393939;*/ } #slmenu ul li div .withchild a.theparent { color: #000; display: table-cell; font-size: 12px; font-family: Arial,Helvetica,sans-serif; font-weight: bold; height: 25px; padding-top: 1px; text-decoration: none; vertical-align: middle; } #slmenu ul li div .withchild img.theparent { float: left; margin: 0px 10px 0px 0px; } #slmenu ul .withchild{ list-style: none outside none; margin: 0px; padding: 0px; } #slmenu ul .withchild ul.child-level { display:block;list-style:none outside none;margin:0;overflow:hidden;padding:0 0 0 5px} #slmenu ul li div .withoutchild .withchild a:hover, #slmenu ul li div .withchild a.theparent:hover { /*background: #444;*/ text-decoration:underline; } #slmenu ul li div .withimage { display: inline-block; vertical-align: top; margin-left: 10px; width: 173px; margin-top: 10px; } #slmenu ul li div .withimage .image img { border: 4px solid #333; background: #fff; } #slmenu ul li div .withimage .image img:hover { border: 4px solid #444; } #slmenu ul li div .withimage .name a { color: #fff; //font-weight: bold; font-size: 11px; text-decoration: none; } #slmenu ul li div .withimage .child-level { list-style: none; margin: 0; padding: 0; align: center; max-height: 90px; text-decoration: none; color: #fff; //font-weight: normal; font-size: 10px; } #slmenu ul li div .withimage .child-level a { text-decoration: none; color: #fff; //font-weight: normal; font-size: 10px; } #slmenu ul li div .withimage .child-level { margin-left: 5px; max-height: 30px; } #slmenu ul li div .withimage .name a:hover { text-decoration: underline; } #slmenu ul li.tilli { border: medium none currentColor; display: block; float: left; padding: 0px 0px 0px 1px; position: relative; text-align: left; } #slmenu ul li.tilli:hover { background: #000; transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0; } a.content { color: #000; font-weight: bold; font-size: 12px; text-decoration: none; font-family: Arial,Helvetica,sans-serif; } a.content:visited { color: #b7b7b7; } a.content:hover { color: #979797; } a.more { padding-left: 94px; margin-top: 1px; color: #000; //font-weight: bold; font-size: 12px; text-decoration: none; font-family: Arial,Helvetica,sans-serif; } a.more:hover { color: #979797; } /* SLMENU */ И еще, сама страничка при нажатии стрелок влево, вправо переезжает туда-сюда. Может быть можно как-то все это дело зафиксировать? Подскажите, пожалуйста, что нужно сделать?