Ячейка таблицы Выпадающее меню привязано справа от ячейки

Question

У меня есть базовая таблица с содержащимся в ней div, которую я вывожу из ячейки «position: absolute», и она хорошо поднимается ниже ячейки таблицы, начиная слева от ячейки и перетекая вправо. *

Я хочу иметь возможность сделать это в обратном направлении с последней ячейкой (то есть иметь привязку таблицы подменю непосредственно к ячейке (или, по сути, к таблице)

У меня это работает в FireFox (немного беспорядочно), но в IE это не работает.

HTML выглядит следующим образом

<table style="background-color: gold;" border="1" bordercolor="orange"  cellspacing="0">
    <tr>
        <th>Parent Cell 1
        <div style="position: absolute;  background-color: green; color: white;">
            supercalifragilisticexpialidocious
        </div>
        </th>
        <th>Parent Cell 2
        </th>
        <th>Parent Cell 3
        </th>
        <th>Parent Cell 4
        </th>
        <th>Parent Cell 5
            <div style="float:right; ">
                <div style="position:absolute;">
                    <div style="position: absolute; right: 0px; background-color: green; color: white;">
                        supercalifragilisticexpialidocious
                    </div>
                </div>
            </div>
        </th>
    </tr>
</table>

Кто-нибудь знает, как я мог получить самый правый пункт подменю (в некотором смысле), чтобы опуститься до того же уровня, что и левый. Как я уже сказал, это (упрощенная версия) работает в FireFox, но не в IE, и мне нужно, чтобы оно работало в обоих ...: S

Я также не знаю, правильно ли структурирована самая правая ячейка или есть лучший способ!

Спасибо

Answer 1

Хорошо, из того, что я понял, это в основном то, что вы хотите, за исключением того, что я сделал это с помощью семантической разметки и CSS.

Наценка

<ul id="nav">
    <li>
        <a href="#">Parent 1</a>
        <ul>
            <li><a href="#">Child Item 1</a></li>
            <li><a href="#">Child Item 2</a></li>
            <li><a href="#">Child Item 3</a></li>
            <li><a href="#">Child Item 4</a></li>
        </ul>
    </li>
    <li><a href="#">Parent 2</a></li>
    <li>
        <a href="#">Parent 3</a>
        <ul>
            <li><a href="#">Child Item 1</a></li>
            <li><a href="#">Child Item 2</a></li>
            <li><a href="#">Child Item 3</a></li>
            <li><a href="#">Child Item 4</a></li>
        </ul>
    </li>
</ul>

CSS

#nav {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 20px;
}
#nav li {
    border: 1px solid #ccc;
    width: 150px;
    height: 20px;
    float: left;
    position: relative;
    background: #eee;
}
#nav ul {
    margin: 0;
    padding: 0;
    width: 130px;
    position: absolute;
    top: 21px;
    left: 0;
    list-style: none;
    display: none;
}
#nav li:hover ul {
    display: block;
}
#nav ul li {
    width: auto;
    float: none;
}

Если вы хотите, чтобы дочерние списки были привязаны справа, то вы бы изменили объявление CSS в #nav ul, которое гласит left: 0;, вместо этого right: 0;.

Это будет работать в IE7 +. Для IE6 вам нужно будет использовать решение на основе сценариев, чтобы вызвать зависание, например что угодно: hover , или написать свое, если оно слишком сложное для вашего вкуса.