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

<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);
}