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

[Леонардо]

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

Дизайн для Друпала, тема 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;
  }
}

[hedgehog]

Дизайн для Друпала, тема Willibald.

Тем для CMS в интернете очень много, поэтому вряд ли кто-то из присутствующих использовал конкретно Willibald. Лучше дать ссылку на сайт, где можно посмотреть "вживую" и пощупать дебагером.