МЕГАМЕНЮ

Рабочий концепт

by ivangalin

HTML

<ul class="L1">
    <li class="L1i"><p class="L1t"><span>Новости</span></p><div class="S">
        <div class="C">
            <ul class="L2">
                <li class="L2i"><a class="L2t" href="/news/world"><span>Новости мира</span></a></li>
                <li class="L2i"><a class="L2t" href="/news/russia"><span>Новости России</span></a></li>
                <li class="L2i"><a class="L2t" href="/news/region"><span>Новости области</span></a></li>
                <li class="L2i"><a class="L2t" href="/news/town"><span>Новости города</span></a></li>
                <li class="L2i"><a class="L2t" href="/news/interview"><span>Интервью</span></a></li>
            </ul>
            <ul class="L2">
                <li class="L2i"><p class="L2t"><span>Специальное</span></p></li>
                <li class="L2i"><a class="L2t" href="/special/1"><span>Акции и скидки</span></a></li>
                <li class="L2i"><a class="L2t" href="/special/2"><span>Клуб привелегий</span></a></li>
                <li class="L2i"><a class="L2t" href="/special/3"><span>Реферальная программа</span></a></li>
            </ul>
        </div>
        <div class="C">
            <ul class="L2">
                <li class="L2i"><p class="L2t"><span>Операции</span></p></li>
                <li class="L2i"><a class="L2t" href="/operation/1"><span>Продление регистрации</span></a></li>
                <li class="L2i"><a class="L2t" href="/operation/2"><span>Перенос</span></a></li>
                <li class="L2i"><a class="L2t" href="/operation/3"><span>Смена владельца аккаунта</span></a></li>
                <li class="L2i"><a class="L2t" href="/operation/4"><span>Перенос услуг</span></a></li>
                <li class="L2i"><a class="L2t" href="/operation/5"><span>Изменение данных</span></a></li>
                <li class="L2i"><a class="L2t" href="/operation/6"><span>Полное скрытие</span></a></li>
                <li class="L2i"><a class="L2t" href="/operation/7"><span>Восстановление...

CSS

ul, li{
    display: block;
    list-style: none;
    margin: 0;
    padding:0;
}
ul li.L1i, ul li.L2i, ul li.L3i, ul li.L1t, ul li.L2t, ul li.L3t {white-space: nowrap;}
ul a { display: block}

.L1  {}
.L1i {float:left;position: relative;}

li.L1i div.S       {position:absolute;float:left;}
li.L1i div.S div.C {float:left;}

li.L1i div.S { display:none;}
li.L1i:hover div.S { display:block;}
.L1i a:hover, .L1i p:hover { }

/* *************************** STYLISH *************************** */
.L1t, .L2t, .L3t { padding: 0 0.5em; text-decoration:none;}

.L1 {border: 1px dotted red;}
.L2 {border: 2px solid lime;   background:#f5f5f5;}
.L3 {border: 2px solid yellow; background:lightGreen;margin:5px;}
.S  {border: 2px solid blue;   background:lightPink;}
.C  {border: 2px solid magenta;background:lightBlue;}
.L1t       {color:darkgreen;}
.L1t:hover {color:darkgreen;   background: blue;}
.L2t       {color:darkgreen;}
p.L2t      {color:red;}
.L2t:hover {                   background: silver;}
.L3t       {color:darkgreen;}
.L3t:hover {color:darkgreen;   background: cyan;}
li.L1i div.C {}

JavaScript

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

    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
    });

});