МЕГАМЕНЮ

Первый тестовый вариант

by ivangalin

HTML

<ul class="L1">
    <li class="L1i">
        <a href="/"><span>Домены</span></a><div>
        <ul class="L2">
            <li class="L2i"><a href=""><span>Регистрация</span></a></li>
            <li class="L3i"><a href=""><span>Зарегистрировать</span></a></li>
            <li class="L3i"><a href=""><span>Подобрать</span></a></li>
            <li class="L3i"><a href=""><span>Премиум</span></a></li>
            <li class="L3i"><a href=""><span>Освобождающиеся</span></a></li>
            
            <li class="L2i"><a href=""><span>Покупка-Продажа</span></a></li>
            <li class="L3i"><a href=""><span>Магазин</span></a></li>
            <li class="L3i"><a href=""><span>Гарант</span></a></li>
            <li class="L3i"><a href=""><span>Смена адинистратора</span></a></li>
            <li class="L3i"><a href=""><span>Смена регистратора</span></a></li>
            
        </ul>
        <ul class="L2">
            <li class="L2i"><a href=""><span>Операции</span></a></li>
            <li class="L3i"><a href=""><span>Продление регистрации</span></a></li>
            <li class="L3i"><a href=""><span>Перенос</span></a></li>
            <li class="L3i"><a href=""><span>Смена владельца аккаунта</span></a></li>
            <li class="L3i"><a href=""><span>Перенос услуг</span></a></li>
            <li class="L3i"><a href=""><span>Изменение данных</span></a></li>
            <li class="L3i"><a href=""><span>Полное скрытие</span></a></li>
            <li class="L3i"><a href=""><span>Восстановление доступа</span></a></li>
            <li class="L3i"><a href=""><span>Защита доменного имени</span></a></li>
            
            <li class="L2i"><a href=""><span>Специальное</span></a></li>
            <li class="L3i"><a href=""><span>Акции и скидки</span></a></li>
            <li class="L3i"><a href=""><span>Клуб привелегий</span></a></li>
            <li class="L3i"><a href=""><span>Реферальная программа</span></a></li>
        </ul>
        </div>
    </li>
    <li...

CSS

ul, li{
    display: block;
    list-style: none;
    margin: 0;
    padding:0;
}
ul a { display: block}

ul.L1  {border: 1px dotted red;-overflow:hidden;}
li.L1i {float:left;position: relative;}

li.L1i div {-position:absolute;float:left;border: 1px solid lime;background:#eee;}
ul.L2      {border: 1px dotted magenta;float:left;}

li.L2i {white-space: nowrap;}
li.L3i {white-space: nowrap;}


li.L1i div{ display:none;}
li.L1i:hover div{ display:block;}
li.L1i:hover > a { background: lime;}
li.L3i > a { color: red;}
li.L3i:hover > a { background: lightgray;}

JavaScript

var div = $('li.L1i div');
div.css({
    'margin-left': '-9999px',
    'margin-top': '-9999px',
    'display': 'block',
    '': '',
    '': '',
});

var div_w = div.css('width');
var div_h = div.css('height');
div.css({
    'display':'',
    'margin': '0',
    'position': 'absolute',
    'width': div_w,
    'height': div_h
});