Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.

DLE FAQ » Все вопросы » Стили (CSS) » Помогите настроить всплывающее меню

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

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

вопрос

Здравствуйте, подскажите, пожалуйста, как правильно сделать третий уровень у стандартного дле-шного меню шаблона 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 - - #5718

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

Админ

3457

ПафНутиЙ - - #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; }

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

Puxlik | Telegram Sender ¹³

Puxlik
Telegram Sender

Версию 17.1 поддерживает ?
TeraMoune | Не загружается изображение [Ошибка HTTP] ... ²

TeraMoune
Не загружается изображение [Ошибка HTTP]. Как исправить?

В этой версии есть фрагментация загрузки файла когда загружаемый файл разделяется на фрагменты, по умолчанию 1 фрагмент 1.5мб. (И у вас написано лимиты на файл 4мб и картинки 5.86мб, этого достаточно чтобы принимать 1.5мб фрагменты) И если бы была проблема с весом или чем-то подобным то об этом бы сервер сообщил. Сервер отдал 500 ошибку это значит что угодно, нужно смотреть ответ от сервера в консоли разработчика или логах.
RedFox | Не загружается изображение [Ошибка HTTP] ... ²

RedFox
Не загружается изображение [Ошибка HTTP]. Как исправить?

"Некоторые картинки загружаются, но большинство нет."

Сначала не обратил внимания, но видимо проблема в этом. Все, что больше 100Кб, не загружается. Что странно, поскольку в php у меня следующие значения:
post_max_size = 100M
upload_max_filesize = 100M
max_file_uploads = 20

Полагаю, где-то еще надо увеличить размер загружаемой картинки, но где?
LMakc | Модуль читалка pdf ¹

LMakc
Модуль читалка pdf

Не начинай, я заплатил сегодня штраф за підручники. Сейчас очень сложно с этим.
ssssss | Сделать подсчет количества символов в ко ... ⁵

ssssss
Сделать подсчет количества символов в комментариях

Есть актуальный плагин под 17 версию? (только количество символов! без наворотов... записей куда-либо и т.п.) *ББ-редактор
alex.sg.spb | Как вывести информацию о обновлении ново ... ⁸

alex.sg.spb
Как вывести информацию о обновлении новости, но на время?

вопрос, в продолжение поста. Помогите с кодом вывода инфо UPDATE на краткой новости, так чтобы не нужно было нажимать внутри новости при редактировании галочку?
Kentavr | Как вместо %20 в адресной строке подстав ... ⁹

Kentavr
Как вместо %20 в адресной строке подставлять символ + между словами ???

Спасибо огромное. Этот вариант самый простой и рабочий!

derebas | Как вместо %20 в адресной строке подстав ... ⁹

derebas
Как вместо %20 в адресной строке подставлять символ + между словами ???

К черту htaccess давайте проще

к href добавьте id="xfield_value"

<a href="/company/[xfvalue_company]/" id="xfield_value">[xfvalue_company]</a>

И добавьте скрипт обработчик

<script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a#xfield_value');

    links.forEach(link => {
      let href = link.getAttribute('href');

      if (href) {
        href = href.replace(/ /g, '+');
        link.setAttribute('href', href);
      }
    });
  });
</script>

Kentavr | Как вместо %20 в адресной строке подстав ... ⁹

Kentavr
Как вместо %20 в адресной строке подставлять символ + между словами ???

Так сайт не работает вообще. Браузер выдает такое

Страница недоступна Сайт ... выполнил переадресацию слишком много раз.
Попробуйте удалить файлы cookie.

ERR_TOO_MANY_REDIRECTS

Куки чистил не помогает
derebas | Как вместо %20 в адресной строке подстав ... ⁹

derebas
Как вместо %20 в адресной строке подставлять символ + между словами ???

Попробуйте так
RewriteEngine On
RewriteCond %{REQUEST_URI} %20
RewriteRule (.*)%20(.*) $1+$2 [N]
RewriteRule (.*) $1 [R=301,L]

наверх

Технический сбой

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

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

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

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

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

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

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

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

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

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

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

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

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

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