Codename

Огромное спасибо за помощь, проблема решилась.

Получилось заменой css-свойства "outline" на "border".

Внимательно просмотрел код, сделал всё так. Теперь все подменю стали заметно ровнее, но проблема с расползающейся при наведении боковой границе в Firefox остаётся.

Только что проверил через Оперу, там действительно всё хорошо. В Firefox вылезает это: А вот идеальный вариант через Оперу:

Могу попросить вас взглянуть на страницу? Попробовал сделать по вашему совету, но почему-то не срабатывает. Страницу решил пока не трогать, так как такое состояние меню уже близко к нужному, меняю всё в текстовом файле. Самое длинное меню - блок Fable 3 -> Локации -> Хмарье -> Яснодол (4 уровня), там лучше всего виден масштаб.

Вы имеете в виду <li> первого уровня вложенности или невложенных (всегда видимых) пунктов?

Теперь та же проблема с подменю в подменю

Исправил. Убрал вообще "position: relative;" у одного элемента, оставлось только "position: absolute;" у другого, отступы параметрами "top" и "left" заменил на "margin-top" и "margin-left".

К сожалению, не срабатывает, ведь это не единственнный блок (в коде html привёл только один, но на деле их где-то 7). Обводка действительно раздвигается, как на моих скриншотах

Здравствуйте, не могу понять, как исправить вертикальное раскрывающееся css-меню. Проблема в том, что при наведении на пункт, имеющий подпункты, субменю не просто вылезает справа, но и тащит за собой правую сторону обводки всего блока + раздвигает пространство между первым и вторым пунктами. Прилагаю скриншоты до и после наведения мыши. Код CSS #blocks {display: table-cell; width: 20%; background-color: #e9e9e9;-webkit-box-shadow: 2px 3px 4px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow: 2px 3px 4px 0px rgba(50, 50, 50, 0.75);box-shadow: 2px 3px 4px 0px rgba(50, 50, 50, 0.75);outline: 3px solid #8c3200;} .block-top {min-height: 44px; height: auto; width: auto;background-color: #5b2100;outline: 3px solid #8c3200;-webkit-box-shadow: 1px 5px 5px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow: 1px 5px 5px 0px rgba(50, 50, 50, 0.75);box-shadow: 1px 5px 5px 0px rgba(50, 50, 50, 0.75);padding: 0px; 0px; 0px; 0px;margin: 0;}.block-top-text {font-size: 26px;font-weight: bold;font-family: Arial;text-align: center;padding: 10px 0% 10px 0%;color: #8c3200;} .block-menu {width: auto;padding: 0px 0px 0px 0px;font-family: Arial;font-size: 20px;color: #8c3200;}.block-menu ul {list-style-type: none;margin: 0;padding: 0px 0px 0px 4px;} .block-menu ul li {border-bottom: 1px dotted #8c3200;} .block-menu a {font-family: Arial;font-size: 20px;color: #8c3200;text-decoration: none;}.block-menu a:hover {color: #AD704E;} .block_sub1 li ul li {display: none;position: absolute;left: 210px;top: -40px;}.block_sub1 li:hover ul li {display: block;position: relative;background-color: #AD5A2B;}Код html <div id="blocks"><div class="block-top"><div class="block-top-text">Fable Anniversary</div></div><div class="block-menu"><ul class="block_sub1"><li> <a href="#">Пункт 1</a> <ul> <li><a href="#">Подпункт 1</a></li> <li><a href="#">Подпункт 2</a></li> <li><a href="#">Подпункт 3</a></li> <li><a href="#">Подпункт 4</a></li> <li><a href="#">Подпункт 5</a></li> </ul></li><li><a href="#">Пункт 2</a></li><li><a href="#">Пункт 3</a></li><li><a href="#">Пункт 4</a></li><li><a href="#">Пункт 5</a></li></ul></div>Описание структурных элементов blocks - общий контейнер для всей колонки с меню;block-top - шапка каждого меню в колонке (без текста);block-top-text - текст шапки в каждом меню;block-menu - непосредственно меню (пункты);block-sub1 - тоже меню, подпункты.Прошу прощения за большие картинки, не знаю, как прикрепить. Очень надеюсь на помощь.