@anton99zel
29а класс средней школы №7

Как сделать разные стили для двух меню?

Есть меню
<nav>
  <ul class="topmenu">
    <li><a href="">О нас</a></li>
    <li><a href="">Доставка</a></li>
    <li><a href="">Оплата</a></li>
    <li><a href="" class="submenu-link">Сервисы</a>
      <ul class="submenu">
        <li><a href="">Помощь по заказу</a></li>
        <li><a href="">Спроси у эксперта</a></li>
      </ul>
    </li>
    <li><a href="">Салоны оптики</a></li>
  </ul>
</nav>


и стиль к нему
nav {
  display: table;
  margin: 0 auto;
  padding-top: 8px;
  padding-left: 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topmenu > li {
  float: left;
  position: relative;
  font-family: P22, 'Comic Sans MS', cursive;
}

.topmenu > li > a {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  color: #7e7e7e;
  padding: 16px 15px;
}

.topmenu > li:hover > a,
.submenu li:hover a {
  color: #468ecb;
}

.submenu-link:after {
  font-family: P22, 'Comic Sans MS', cursive;
  color: inherit;
  margin-left: 0px;
}

.submenu {
  margin-top: 10px;
  border: 0px solid #ccc;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .2);
  background: #fff;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
  width: 180px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: .1s ease-in-out;
}

.submenu > li {
  padding: 3px 0px;
}

.submenu a {
  font-family: P22, 'Comic Sans MS', cursive;
  color: #7e7e7e;
  text-align: left;
  padding: 12px 15px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.submenu li:last-child a {
  border-bottom: none;
}

.topmenu > li:hover .submenu {
  opacity: 1;
  transform: scaleY(1);
}

Создаю на основе этого меню второе меню на сайте, но мне нужно не много видоизменить его, типа цвета, отступы.
Помогите сделать такое же меню, но чтобы второе меню не подхватывало стили первого.
Сам пробую, но получается частично, в частности не могу изменить nav
  • Вопрос задан
  • 607 просмотров
Пригласить эксперта
Ответы на вопрос 1
Exploding
@Exploding
wtf?
Добавьте класс для каждого nav. Разный разумеется. Например: nav.menu-left и nav.menu-top да и всё
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы