Search the Community

Помогите настроить выпадающее меню Дизайн для Друпала, тема Willibald. Что есть: выпадающее меню, и первый и второй уровни, отображается в виде "кнопок", а надо, чтобы второй уровень отображался в виде СПИСКА. Устанавливал в #main-menu li.level-2 display: list-item; но не помогло. Пробовал и разные др. варианты - ничего не меняется. Помогите. Вот код стиля /** * @file * Menu styling */ /******************************************************************************* * Mobile first ******************************************************************************/ #main-menu { background-color: #ddd; line-height: 1; width: 100%; padding: .2em; /* * Level 1 <ul> tag */ /* * Level 1 <li> tag */ /* * Level 2 <ul> tag */ } #main-menu ul, #main-menu li { list-style-image: none; list-style-position: 0; list-style-type: none; margin: 0; padding: 0; } #main-menu > ul { display: block; width: 100%; } #main-menu li.level-1 { float: left; margin: .1em; padding: .4em .7em; background-color: #727b8a; } #main-menu li.level-1:nth-child(4n+1) { background-color: #485873; } #main-menu li.level-1:nth-child(4n+2) { background-color: #d67c1c; } #main-menu li.level-1:nth-child(4n+3) { background-color: #a2c037; } #main-menu li.level-1:nth-child(4n+4) { background-color: #78adb8; } @media all and (max-width: 45em) { #main-menu li.level-1:hover { opacity: .5; background-color: #8a95a7; } } #main-menu li.level-1 a { color: white; text-transform: uppercase; } @media all and (max-width: 45em) { #main-menu li.level-1 a:hover { opacity: 1; background-color: #8a95a7; } } #main-menu li.level-1 > ul { display: none; } #main-menu li.level-4 { display: none; } /******************************************************************************* * Large ******************************************************************************/ @media all and (min-width: 45em) { #main-menu { padding: 0; /* * Colors */ /* * Level 1 <ul> tag */ /* * Level 1 <li> tag */ /* * Level 2 <ul> tag */ /* * Level 2 <ul> tag : hover */ /* * Level 2 <li> tag */ /* * Level 3 <ul> tag */ /* * Level 3 <li> tag */ /* * Frontpage */ } #main-menu li.level-1 > ul { background-color: #727b8a; } #main-menu li.level-1:nth-child(4n+1) > ul { background-color: #485873; } #main-menu li.level-1:nth-child(4n+2) > ul { background-color: #d67c1c; } #main-menu li.level-1:nth-child(4n+3) > ul { background-color: #a2c037; } #main-menu li.level-1:nth-child(4n+4) > ul { background-color: #78adb8; } #main-menu li.level-1:first-child { margin-left: 2em; } #main-menu > ul { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAtCAMAAABYpfH2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9QTFRFubm5WF9rWWBrqqqq////wszonAAAABZJREFUeNpiYGRgZGBiYGGgNmAGCDAAAwMADGofgFwAAAAASUVORK5CYII='); height: 45px; position: relative; } #main-menu li.level-1 { border: 0; border-left: 1px solid #ccc; display: block; height: 45px; margin: 0; padding: 0; z-index: 500; } #main-menu li.level-1:first-of-type { border: 0; } #main-menu li.level-1 > a { background: #eeeeee; border-bottom: 1px solid #aaa; border-top: 1px solid white; color: #727b8a; display: block; font-size: 1em; height: 42px; margin-top: 3px; padding: .7em 1em 0 1em; text-align: center; text-decoration: none; white-space: nowrap; width: 100%; } #main-menu li.level-1 > a.active { text-shadow: 0 0 10px #727b8a; } #main-menu li.level-1 > a:hover { background: rgba(190, 190, 190, 0.5); color: white; opacity: 1; } #main-menu li.level-1.hover-trail > a { background: rgba(190, 190, 190, 0.5); } #main-menu li.level-1 > ul { -webkit-box-shadow: 0 0 0 1px white, 0 0 7px black; -moz-box-shadow: 0 0 0 1px white, 0 0 7px black; box-shadow: 0 0 0 1px white, 0 0 7px black; -webkit-transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s; -moz-transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s; -ms-transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s; -o-transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s; transition: height 0.2s 0.3s, opacity 0.2s 0.3s, border 0.2s 0.3s; border: 0; display: table-row; float: left; height: 0; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 45px; width: 100%; z-index: 100; } #main-menu li.level-1:hover > ul { height: 3em; opacity: 1; } #main-menu li.level-1.max-1:hover > ul { height: 5.1em; } #main-menu li.level-1.max-2:hover > ul { height: 6.7em; } #main-menu li.level-1.max-3:hover > ul { height: 8.3em; } #main-menu li.level-1.max-4:hover > ul { height: 9.9em; } #main-menu li.level-1.max-5:hover > ul { height: 11.5em; } #main-menu li.level-1.max-6:hover > ul { height: 13.1em; } #main-menu li.level-1.max-7:hover > ul { height: 14.7em; } #main-menu li.level-1.max-8:hover > ul { height: 16.3em; } #main-menu li.level-1.max-9:hover > ul { height: 17.9em; } #main-menu li.level-1.max-10:hover > ul { height: 19.5em; } #main-menu li.level-2 { background: none; border-right: 1px solid white; float: left; text-transform: uppercase; font-family: "Willibald Sans Black", sans-serif; padding: 1em; display: table-cell; height: 100%; } #main-menu li.level-2:last-child { border: none; } #main-menu li.level-2 > a { color: #fff; display: block; font-size: 1em; } #main-menu li.level-2 > a:hover { opacity: .7; } #main-menu li.level-2 > a.active { text-shadow: 0 0 10px white; } #main-menu li.level-2 > ul { border: 0; background: none; float: none; padding: 0; margin-top: .5em; } #main-menu li.level-3 { padding: .3em 0 .3em .8em; font-family: "Willibald Sans", sans-serif; } #main-menu li.level-3 a { display: block; color: #fff; text-transform: none; } #main-menu li.level-3 a:before { content: "- "; } #main-menu li.level-3 a:hover { opacity: .7; } #main-menu li.level-3 a.active { text-shadow: 0 0 10px white; } #main-menu li.front { width: 8%; text-indent: -9999px; } #main-menu li.front a { background-color: #eee; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ9JREFUeNpiYqAyYCJWYUF+fgIx6hiJNGw+kAIZuGDCxImJSOINUCZI/AFRLkQyDAQSoHwYqIdiBaK8jGYYAw5DUQALiYYhGypAdKQQMAwGAogykEjDiEs2FBjWDwsCRmq5DAguALEjM9QwAyAlCZVQIMOwBUB8Eoh/MKJ5uQGarkgFjsCEfYCkrEf1vDxq4BA2EL20OUCmOQ9gDIAAAwDZjTFwpZH3awAAAABJRU5ErkJggg=='); background-position: 50% 6px; background-repeat: no-repeat; } #main-menu li.front a:hover { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ9JREFUeNpiYqAyYCJWYUF+fgIx6hiJNGw+kAIZuGDCxImJSOINUCZI/AFRLkQyDAQSoHwYqIdiBaK8jGYYAw5DUQALiYYhGypAdKQQMAwGAogykEjDiEs2FBjWDwsCRmq5DAguALEjM9QwAyAlCZVQIMOwBUB8Eoh/MKJ5uQGarkgFjsCEfYCkrEf1vDxq4BA2EL20OUCmOQ9gDIAAAwDZjTFwpZH3awAAAABJRU5ErkJggg=='); background-position: 50% 6px; background-repeat: no-repeat; } } @media all and (min-width: 45em) and (max-width: 40em) { #main-menu li.level-1 { height: 35px; } } @media all and (min-width: 45em) and (max-width: 50em) { #main-menu li.level-2 > a { font-size: .95em; } } @media all and (min-width: 45em) and (max-width: 50em) { #main-menu li.level-3 a { font-size: .9em; } }