0

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

.main-menu {
    margin: 0;
    padding: 10px 15px;
}
.main-menu li {
    display: inline;
    margin-right: 60px;
}
.main-menu li a {
    color: #383838;
    font-size: 21.5px;
    text-decoration: none;
}
.main-menu li a:hover {
    color: #f0af40;
    border-top: 2px solid #f0af40;
}
.sub-menu {
    display: none;
}
<ul class="main-menu">
  <li><a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Фото</a>
    <ul class="sub-menu">
      <li><a href="#">Сводебное</a>
      </li>
      <li><a href="#">Для школ</a>
      </li>
      <li><a href="#">Для детсадов</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Видео</a>
  </li>
  <li><a href="#">Контакты</a>
  </li>
</ul>

1 ответ 1

1

При наведении на li показывать sub-menu

.main-menu {
    margin: 0;
    padding: 10px 15px;
}
.main-menu li {
    display: inline;
    margin-right: 60px;
    position: relative;
}
.main-menu li a {
    color: #383838;
    font-size: 21.5px;
    text-decoration: none;
}
.main-menu li a:hover {
    color: #f0af40;
    border-top: 2px solid #f0af40;
}
.sub-menu {
    display: none;
  position:absolute;
  left: 0;
  top: 100%;
  padding: 0;
}

.main-menu li:hover .sub-menu {
  display: block;
}
<ul class="main-menu">
  <li><a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Фото</a>
    <ul class="sub-menu">
      <li><a href="#">Сводебное</a>
      </li>
      <li><a href="#">Для школ</a>
      </li>
      <li><a href="#">Для детсадов</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Видео</a>
  </li>
  <li><a href="#">Контакты</a>
  </li>
</ul>

2
  • Подскажите, а что нужно добавить чтобы по клику пункт становился таким цветом #f0af40, без использования js 22 янв 2016 в 7:39
  • 1
    @ChromeChrome, без JS я к сожанению не знаю как сделать, разве что все элементы переделать под checkbox и проверять, если отмечен тогда задавать цвет. Пример: jsfiddle.net/fabric/cty51ay9 22 янв 2016 в 7:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.