Serhioromano
@Serhioromano
Web Developer

Как показать див встплываеющий как меню в диве с overflow:hidden?

Есть див с overflow:hidden и в нем есть таблица с записями с базы. У каждой записи есть иконка и при наведении на ней появляется меню управления. Типа удалить, редактировать и т.д.


Так вот у самой последенй записи или у предпослдних часть меню прячется или обрезается выходя за рамки родительского дива. Как можно сделать что бы меню вылетало поверх?


вот пример cssdesk.com/Q9pxa


вы увидите зеленую зону. Это класс elcontent. Это как бы содержимое выводимое результаты формы. Лэйбл содержит имя поля а зленая зона конетнт. Так вот как только я уберу overflow:hidden с зеленого дива он сразу становится по ширине на всю а мне надо что бы лейбл был фисиированый и зеленый див что осталось и не обтекал лейбл. Ну как сейчас. Так что я не могу убрать overflow:hidden.


А вот это меню как раз попадает в этот зеленый див.
  • Вопрос задан
  • 12557 просмотров
Пригласить эксперта
Ответы на вопрос 8
@dmitryim
Внутри дива с overflow:hidden показать обрезаемое содержимое не получится. Поэтому, по идее, есть два варианта:

1) Убрать у родительского дива overflow:hidden
элемент главного меню {position:relative;}
контейнер подменю {position:absolute; top:Npx; left:Mpx; display:none;}
контейнер подменю:hover {display:block;}
Таким образом, скрытое подменю будет показываться только при наведении на родительский элемент меню.

2) Использовать JS, чтобы вынести подменю за рамки родительского контейнера (переместив его, например, прямо в body) и спозиционировать где требуется.
Ответ написан
Комментировать
@egorinsk
Убрать overflow:hidden. Назначение этого свойства — скрывать вылезающие за пределы дива (кроме AP в некоторых случаях) элементы. Почему-то некоторые особо криворукие товарищи пытаются лечить им баги своей кривой верстки, что неправильно.
Ответ написан
denver
@denver
У меня вот так получилось:
cssdesk.com/v8aKE

И вообще, в следующий раз не поленитесь, сами пример слабайте.
Ответ написан
Serhioromano
@Serhioromano Автор вопроса
Web Developer
I added an example and additional description to the post.
Ответ написан
Комментировать
Serhioromano
@Serhioromano Автор вопроса
Web Developer
Извините запарялся. Я добавил пример и описание в чем собственно проблема.
Ответ написан
Комментировать
.elcontent{overflow: auto; display: table;}


Или не располагать блок меню внутри блока с overflow: hidden. Положить его в коде рядом.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы