Div position z-index. Помогите

[OOA1969]

Уважаемые ГУРУ, помогите новичку ...
Работала конструкция ...
div position relative
в нём была таблица, в каждой ячейке загружалось img, к которой по id привязывался div position absolute z-index=100 (всплывающее меню ul-li).
При наведении мыши на img всплывало меню в центре картинки.
Решил убрать из конструкции таблицу ...
Остальные данные не менял. Только поудалял все tr и td. Теперь при наведении мыши на img всплывающее меню появляется, но оно прижато к левому краю body, а по вертикали работает нормально.
Что могло произойти? Почему конструкция перестала работать?
Заранее спасибо!

[Алексей Петрович]

Верни div position relative. Ну или обёртке меню назначь position relative.

[OOA1969]

Уважаемые ГУРУ, помогите новичку ...
Работала конструкция ...

div position relative
в нём была таблица, в каждой ячейке загружалось img, к которой по id привязывался div position absolute z-index=100 (всплывающее меню ul-li).
При наведении мыши на img всплывало меню в центре картинки.
Решил убрать из конструкции таблицу ...
Остальные данные не менял. Только удалил все tr и td. Теперь при наведении мыши на img всплывающее меню появляется, но оно прижато к левому краю body, а по вертикали работает нормально.
Что могло произойти? Почему конструкция перестала работать?
Заранее спасибо!

Вот сам текст ...
CSS
.content { position: relative; overflow: auto; }
.popmnu { z-index: 100; display: none; position: absolute; margin-top: -50px; padding-left: 70px; }
HTML
<div class="content">
<img src='images/flag.png' onmouseover=Popmenu('flagA') />
<div class='popmnu' id='flagA'>
<ul>
<li><a href='1.html'>город 1</a></li>
<li><a href='2.html'>город 2</a></li>
</ul>
</div>

[Алексей Петрович]

Меня пугает margin-top: -50px; padding-left: 70px;, зачем это вообще нужно?
CSS:

.content {
    position: relative;
    overflow: auto; }
.popmnu {
    z-index: 100;
    display: none;
    position: absolute;
    top: 0;
    left: 0; }

HTML:

<div class="content">
    <img src='images/flag.png' onmouseover=Popmenu('flagA') />
    <div class='popmnu' id='flagA'>
        <ul>
            <li><a href='1.html'>город 1</a></li>
            <li><a href='2.html'>город 2</a></li>
        </ul>
    </div>
</div>

Ты </div> пропустил может в этом проблема, а может из-за margin. А лучше сделай это без JS. Вот тебе простой пример без JS http://jsfiddle.net/gu7e425y/.

[OOA1969]

"margin-top: -50px; padding-left: 70px;" нужны чтобы на картинке с размерами 140 * 100 текст всплывал посередине картинки

[OOA1969]

а JS нужна только для слежения за мышкой ... onmouseover

[Алексей Петрович]

"margin-top: -50px; padding-left: 70px;" нужны чтобы на картинке с размерами 140 * 100 текст всплывал посередине картинки

А не проще использовать свойства left, top? А для центрирования flex-box, с дочерним элементом margin: auto;

[OOA1969]

При top: 0; left: 0; - окно всплывает в левом верхнем углу div content, а мне надо, чтобы оно всплывало на текущей картинке ... а их, например 6 рядов по 8 штук ...

[Алексей Петрович]

а JS нужна только для слежения за мышкой ... onmouseover

Ну с этим и css справиться. Вот представь ситуацию когда на твой сайт зайдёт пользователь и у него будет отключен JS. (Я иногда отключаю, с целью экономии трафика)

[ruslan_mart]

а JS нужна только для слежения за мышкой ... onmouseover

А CSS hover не вариант?