Помогите настроить всплывающее меню

Lady 04.07.2012 всплывающее меню Все вопросы » Стили (CSS) 4980

вопрос

Здравствуйте, подскажите, пожалуйста, как правильно сделать третий уровень у стандартного дле-шного меню шаблона Default. Сейчас только два уровня корректно отображаются, третий, по всей видимости, нужно прописать в стилях, но, увы, не знаю, как правильно. Нужно, чтоб третий уровень меню "уезжал" вбок от второго и чтоб все пункты меню просматривались.

Заранее большое спасибо!

Показать / Скрыть текст

/*---Menu---*/
#menubar { margin-bottom: 5px; }
.mbar { height: 52px; }
    .mbar .mbar { background-position: 100% -52px; }
        .mbar .mbar .mbar { background-position: 0 -104px;  }
    
        .menubar { height: 47px; }
            .menubar ul { line-height: 26px; margin-top: 2px; text-transform: uppercase; }
            .menubar ul li, .menubar ul a, .menubar ul a b { height: 26px; float: left; }
            .menubar ul a { margin-right: 0px; color: #000;  font-size: 0.9em; font-family: tahoma;  }
                .menubar ul a b { cursor: pointer; padding: 0 0px;  }

                .menubar ul a:hover { background-position: 0 0; }
                    .menubar ul a:hover b { background-position: 100% -26px; }
                
                .menubar ul .sublnk a { background-position: 0 -104px; }
                    .menubar ul .sublnk a b { padding-right: 5px; background-position: 100% -130px; }

                .menubar ul .sublnk a:hover, .menubar ul .sublnk.selected a { background-position: 0 -52px; }
                    .menubar ul .sublnk a:hover b, .menubar ul .sublnk.selected a b { padding-right: 5px; background-position: 100% -78px; }
                
                /*---SubMenu---*/
                .menubar ul .sublnk { position: relative; }
                .menubar ul li ul { width: 200px; margin: 0; top: 26px; left: 0; position: absolute; z-index: 9999; display: none; }
                .menubar ul li ul li a, .menubar ul li ul li, .menubar ul li ul li a b { background: none; float: none; height: auto; display: block; line-height: normal; text-transform: none; }
                .menubar ul li ul li { padding: 0; }
                .menubar ul li ul li a { color: #e2e2e2; padding: 6px 6px; width: 100%; border-bottom: 1px solid #333; background: #666666;
                    opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80);
                }
                .menubar ul li ul li a:hover { background-color: #7f7e7e; }

Ответа пока нет

2 комментария

Юзер

Lady - 2015-05-147 июля 2012 21:26 - #5718

Ребят, ну неужели никто не знает? Хотя бы подскажите, в каком направлении смотреть. Может из этого меню вообще не сделать трехуровневое и я зря морочу себе и вам голову? А может там достаточно пару строк подправить... Пожалуйста, буду очень признательна.

Админ

3457

ПафНутиЙ - 2015-05-148 июля 2012 10:04 - #5720

Вот так попробуйте:

Показать / Скрыть текст

#menubar { margin-bottom: 5px; }

.mbar { height: 52px; }

.mbar .mbar { background-position: 100% -52px; }

.mbar .mbar .mbar { background-position: 0 -104px; }

.menubar { height: 47px; }

.menubar ul {
    line-height: 26px;
    margin-top: 2px;
    text-transform: uppercase;
}

.menubar ul li, .menubar ul a, .menubar ul a b { height: 26px; float: left; }

.menubar ul a { margin-right: 0; color: #000; font: 0.9em tahoma; }

.menubar ul a b { cursor: pointer; padding: 0 0; }

.menubar ul a:hover { background-position: 0 0; }

.menubar ul a:hover b { background-position: 100% -26px; }

.menubar ul .sublnk a { background-position: 0 -104px; }

.menubar ul .sublnk a b { padding-right: 5px; background-position: 100% -130px; }

.menubar ul .sublnk a:hover, .menubar ul .sublnk.selected a { background-position: 0 -52px; }

.menubar ul .sublnk a:hover b, .menubar ul .sublnk.selected a b { padding-right: 5px; background-position: 100% -78px; }

.menubar ul .sublnk { position: relative; }

.menubar ul li ul,
.menubar ul li ul li ul {
    width: 200px;
    margin: 0;
    top: 26px;
    left: 0;
    position: absolute;
    z-index: 9999;
    display: none;
}

.menubar ul li ul li { position: relative; }

.menubar ul li ul li ul {
    width: 200px;
    margin: 0;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 9999;
    display: none;
}

.menubar ul li ul li a, .menubar ul li ul li, .menubar ul li ul li a b {
    background: none;
    float: none;
    height: auto;
    display: block;
    line-height: normal;
    text-transform: none;
}

.menubar ul li ul li { padding: 0; }

.menubar ul li ul li a {
    color: #e2e2e2;
    padding: 6px 6px;
    width: 100%;
    border-bottom: 1px solid #333;
    background: #666666;
    opacity: 0.8;
    moz-opacity: 0.8;
    filter: alpha(opacity=80);
}

.menubar ul li ul li a:hover { background-color: #7f7e7e; }

Каков вопрос - таков и ответ. Просто помните об этом.

Помогите настроить всплывающее меню

Ответа пока нет

2 комментария

Похожие вопросы

Модификация тега hr

как вывести текстовое окно поверх всех картинок

Помогите исправить вид рейтинга

Скрыть ID но не сам блок

Не стабильно передвигается меню

Не выводятся комментарии и форма добавления

не работают подгруженные шрифты

Как ограничить параметр стиля?

Выпадающее меню в шаблоне, как срастить?

Как правильно прописать асоциативный массив + цикл в SCSS?