Подскажите, как исправить меню

[Codename]

Здравствуйте, не могу понять, как исправить вертикальное раскрывающееся 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 - тоже меню, подпункты.

Прошу прощения за большие картинки, не знаю, как прикрепить.

 

Очень надеюсь на помощь.

[Jelezuha]

нужно диву id blocks вместо outline задать border

[andrey7287]

 Раздвигается не пространство между пунктами а сам пункт. Можно задать фиксированную высоту, что бы этого не происходило.

 С обводкой вроде нет проблем. 

Edited October 24, 2015 by andrey7287

[Codename]

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

[Codename]

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

[Codename]

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

[Jelezuha]

<li> первого уровня  задается position: relative. А дочерним <ul> position: absolute и затем указывается их положение с помощью top bottom, left, right.

Дальше по вложенности также.

[Codename]

<li> первого уровня  задается position: relative. А дочерним <ul> position: absolute и затем указывается их положение с помощью top bottom, left, right.

Дальше по вложенности также.

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

[Jelezuha]

всем <li> содержащим выпадающее меню задаем position: relative

а всем <ul> находящимся внутри <li> задаем position: absolute и координаты.

Edited October 24, 2015 by Jelezuha

[Codename]

всем <li> содержащим выпадающее меню задаем position: relative

а всем <ul> находящимся внутри <li> задаем position: absolute и координаты.

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

Самое длинное меню - блок Fable 3 -> Локации -> Хмарье -> Яснодол (4 уровня), там лучше всего виден масштаб.

Edited October 24, 2015 by Codename

[Jelezuha]

так все в порядке вроде

[Codename]

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

 

А вот идеальный вариант через Оперу:

Edited October 24, 2015 by Codename

[Codename]

всем <li> содержащим выпадающее меню задаем position: relative

а всем <ul> находящимся внутри <li> задаем position: absolute и координаты.

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

[Codename]

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

[Codename]

нужно диву id blocks вместо outline задать border

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