Нужно установить меню codepen.io/Sonick/pen/xJagi вместо стандартного, на дефолт шаблон. Подскажите как подключить его.
Вставьте в любой css-файл шаблона этот код:как подключить его
.menu:before, .menu:after { content:" "; display: table; } .menu:after { clear: both; } .menu { *zoom: 1; } .menu { list-style:none; margin: 50px auto; width: 800px; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } .menu > li { background: #34495e; float: left; position: relative; -webkit-transform: skewX(25deg); } .menu a { display: block; color: #fff; text-transform: uppercase; text-decoration: none; font-family: Arial, Helvetica; font-size: 14px; } .menu li:hover{ background: #e74c3c!important; } .menu > li > a { -webkit-transform: skewX(-25deg); padding: 1em 2em; } /* Dropdown */ .menu > li.folder > ul { position: absolute; width: 200px; left: 50%; margin-left: -100px; -webkit-transform: skewX(-25deg); -webkit-transform-origin: left top; } .menu > li.folder > ul li { background-color: #34495e; position: relative; overflow: hidden; } .menu > li.folder > ul > li > a { padding: 1em 2em; } .menu > li.folder > ul > li::after { content:''; position: absolute; top: -125%; height: 100%; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, .9); } /* Odd stuff */ .menu > li.folder > ul > li:nth-child(odd) { -webkit-transform: skewX(-25deg) translateX(0); } .menu > li.folder > ul > li:nth-child(odd) > a { -webkit-transform: skewX(25deg); } .menu > li.folder > ul > li:nth-child(odd)::after { right: -50%; -webkit-transform: skewX(-25deg) rotate(3deg); } /* Even stuff */ .menu > li.folder > ul > li:nth-child(even) { -webkit-transform: skewX(25deg) translateX(0); } .menu > li.folder > ul > li:nth-child(even) > a { -webkit-transform: skewX(-25deg); } .menu > li.folder > ul > li:nth-child(even)::after { left: -50%; -webkit-transform: skewX(25deg) rotate(3deg); } /* Show dropdown */ .menu > li.folder > ul, .menu > li.folder > ul li { opacity: 0; visibility: hidden; } .menu > li.folder > ul li { transition: .2s ease -webkit-transform; } .menu > li.folder > ul, .menu > li.folder:hover > ul li { opacity: 1; visibility: visible; } .menu > li.folder:hover > ul li:nth-child(even) { -webkit-transform: skewX(25deg) translateX(15px); } .menu > li.folder:hover li:nth-child(odd) { -webkit-transform: skewX(-25deg) translateX(-15px); }
Я нашел решение, но решил и Ваше попробовать но что то не срабатывает, у меня на topmenu назначен id значит в стилях нужно так -#topmenu а Вы видимо для класса написали?код
Я просто подогнал стили под стандартную разметку движка (2.5.1 — Вы не указали версию, возможно у Вас первая ветка, тогда всё вообще будет по-другому) — для примера брал демо-сайт. Для Вашего конкретного случая всё можно сделать, если видеть код.Вы видимо для класса написали