пункты меню в ряд

Question

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

.menu-menu-1-container {
    margin: 0 auto;
    width: 90%;
    height: 66px;
    background: #1254AA;
}

.menu {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    list-style: none;
    position: relative;
    font: normal 14px Helvetica, Arial, sans-serif;
    background: #0EA925;
    /* цвет меню по умолчанию */
}

.menu-item {
    float: left;
    margin: 0;
    padding: 0;
    border-right: px solid #555;
}

.menu-item a {
    padding: 9px 10px;
    display: block;
    color: #F0FFF0;
    /* цвет текста по умолчанию */
    text-decoration: none;
}

.menu-item:hover {
    background: #A9A9A9 url(../dark-theme/img/active.png) repeat-x;
    /* цвет меню при наведении */
}

.menu-item a:hover {
    color: #D20C4B;
    /* цвет текста при наведении */
}

.sub-menu li {
    float: left;
    padding: 10px 0;
    position: absolute;
    left: 0;
    top: 30px;
    display: none;
    /* По умолчанию скрыто */
    width: 79%;
}

.menu-item:hover li {
    display: block;
    background: #A9A9A9;
}

.sub-menu a {
    color: #3A3939;
    /* цвет текста выпадающего меню */
    display: inline;
}

.sub-menu li a:hover {
    color: #F0FFF0;
    /* цвет текста выпадающего меню при наведении */
    text-decoration: none;
}

<div class="menu-menu-1-container">
          <ul id="menu-menu-1" class="menu">

            <li id="menu-item-14" class="menu-item"><a href="http://wordpress/" aria-current="page">Главная</a></li>
            <li id="menu-item-16" class="menu-item"><a href="http://wordpress/sample-page/">Пример страницы</a>                                        

                 <ul class="sub-menu">
                <li id="menu-item-15" class="menu-item"><a href="http://wordpress/sample-page/">Пример страницы</a></li>
                <li id="menu-item-15" class="menu-item"><a href="http://wordpress/sample-page/">без рубрики</a></li>
<li id="menu-item-15" class="menu-item"><a href="http://wordpress/sample-page/">без рубрики</a></li>
<li id="menu-item-15" class="menu-item"><a href="http://wordpress/sample-page/">ссылка</a></li>
                 </ul>

            </li>
         </ul>
      </div>

Answer 1

У вас есть .menu и .sub-menu - списки ul. В списках есть элементы .menu-item и .sub-menu li (согласно вашему наименованию) - элементы списка li.

список .sub-menu по умолчанию скрыт.

При наведении на элемент .menu-item списка .menu, вы должны отображать СПИСОК(ul) .sub-menu, в то время, как вы позиционируете и скрываете элементы списка .sub-menu li.

См. код.

.menu-menu-1-container {
    margin: 0 auto;
    width: 90%;
    height: 66px;
    background: #1254AA;
}

.menu {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    list-style: none;
    position: relative;
    font: normal 14px Helvetica, Arial, sans-serif;
    background: #0EA925;
    /* цвет меню по умолчанию */
}

.menu-item {
    float: left;
    margin: 0;
    padding: 0;
    border-right: px solid #555;
}

.menu-item a {
    padding: 9px 10px;
    display: block;
    color: #F0FFF0;
    /* цвет текста по умолчанию */
    text-decoration: none;
}

.menu-item:hover {
    background: #A9A9A9 url(../dark-theme/img/active.png) repeat-x;
    /* цвет меню при наведении */
}

.menu-item a:hover {
    color: #D20C4B;
    /* цвет текста при наведении */
}

/* Скрывать и показывать надо список sub-menu, а не элементы списка*/
.sub-menu {
  position: absolute;
  list-style: none;
  display: none;
}

.sub-menu li {
    /*float: left; лишнее*/
    padding: 10px 0;
    /*не туда position: absolute; */

    /* По умолчанию скрыто */
    width: 79%;
}

/*при наведении на menu item показывать надо sub-menu*/
.menu-item:hover .sub-menu {
    display: block;
    background: #A9A9A9;
}

.sub-menu a {
    color: #3A3939;
    /* цвет текста выпадающего меню */
    display: inline;
}

.sub-menu li a:hover {
    color: #F0FFF0;
    /* цвет текста выпадающего меню при наведении */
    text-decoration: none;
}

<div class="menu-menu-1-container">
  <ul id="menu-menu-1" class="menu">

    <li id="menu-item-14" class="menu-item"><a href="http://wordpress/" aria-current="page">Главная</a></li>
    <li id="menu-item-16" class="menu-item"><a href="http://wordpress/sample-page/">Пример страницы</a>

      <ul class="sub-menu">
        <li id="menu-item-15" class="menu-item"><a href="http://wordpress/sample-page/">Пример страницы</a></li>
        <li id="menu-item-15" class="menu-item"><a href="http://wordpress/sample-page/">без рубрики</a></li>
        <li id="menu-item-15" class="menu-item"><a href="http://wordpress/sample-page/">без рубрики</a></li>
        <li id="menu-item-15" class="menu-item"><a href="http://wordpress/sample-page/">ссылка</a></li>
      </ul>

    </li>
  </ul>
</div>

БЛОГ НА HUSL

пункты меню в ряд

Ответы (1 шт):