Позиционирование под меню относительно главного меню средствами CSS

[hitec]

Добрый день.

Сижу над следующей задачей:

1. Есть левое боковое меню из ul, li

2. При наведении на пункт меню li, отображаю блок div с подменю.

Но проблема в том, что если боковое меню ul высотою с экран, или более, то всплывающее подменю div (возле последнего пункта меню li) не полностью выводиться на экран, оно уходит за границу нижней часть страницы и видно не полностью.

Решение вижу так:

1. Для верхних пунктов (li) меню (ul), всплывающее под меню (div) позиционирую свойством top. Если всплывающее под меню (div) отображается для самых последних пунктов (li) вертикального меню (ul), то в место свойства top:0; для div думаю использовать свойство bottom:0; что бы под меню всплывало вверх.

2. Сделать высоту меню (ul) и высоту всплывающего подменю (div) равными.

Можно ли это реализовать средствами CSS?

Спасибо.

[andrey7287]

Примерно так.

<ul>
  <li>
    <a href=""></a>
    <div class="drop-down"></div>
  </li>
</ul>

ul {
	position: relative;
}
ul li .drop_menu {
	position: absolute;
	top: 0;
  	left: -9999px;
}
ul li:hover .drop_menu {
  left: 100%
}

 

[Launder]

@hitec, да оба соображения, наверное, логичны. Вы бы разместили пример в песочнице, чтоб можно было более предметно посмотреть и попробовать...

[andrey7287]

2 вариант логичнее и эстетичнее , в нашей компании дизайнеры рисуют только так.  Только выпадающие меню я делаю с помощью JS.