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

Question

[Антон]

Есть меню

<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

Comments

[gleendo]

У вас отвращения нет смотреть на данный code style?
К тому же...давать класс меню нужно соответственно меню, а не содержимому. Зачем давать класс списку, если семантически это не является меню? Отсюда вот и проблемы...
Писать в верхнем регистре в HTML не нужно. Это разметка. За оформление отвечает CSS (text-transform: uppercase;)
И странно как то у вас идет ссылка под меню выше самого под меню (судя по названию класса)
И display: table... Где тут вообще таблица? это же меню.
Это при первом просмотре...
В общем дико ужасная верстка.
Советовал бы почитать про семантическую верстку.

[Сергей delphinpro]

НЕ НАДО ВЫКЛАДЫВАТЬ ВЕСЬ КОД!!!!
Нужно выкладывать проблемный код.

Ты вот поставь себя на место отвечающих - щаз все кинулись разбираться в твоем говне!!! Ага, размечтался.

Ты выдели проблемный кусок кода опиши пробюлему и попытки ее решения.

И я тебе гарантирую, что в процессе написания вопроса ты САМ РЕШИШЬ свою проблему. И нажмешь кнопку "Отмена".

[Astrohas]

font-family: P22, 'Comic Sans MS', cursive;

OMG

Answer 1

[Exploding]

Добавьте класс для каждого nav. Разный разумеется. Например: nav.menu-left и nav.menu-top да и всё

Comments

[Сергей Горячев]

wft тут прям реально в тему :)))

[Антон]

не выходит

<nav.menu-left>
      <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.menu-left {
display: table;
margin: 0 auto;
padding-top:8px;
padding-left:20px;

}
nav.menu-left 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: #red;
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.menu-left> -- серьёзно?
Вот прям строчкой ниже: <ul class="topmenu">
Чувствуете разницу?

[Антон]

<nav class="topmenu">
я так делал уже

[Леонид Князев]

<nav class="menu-left">

[Антон]

блин,
я забыл, что надо не так nav.menu-left или так .menu-left nav, а так .menu-left
ошибка была у меня не html, а в css
устал видимо

[Exploding]

anton99zel: Леонид Князев: Сергей Горячев:
Ну, главное что все живы и здоровы)))