A
A
Anton2017-08-24 20:25:28
ASUS
Anton, 2017-08-24 20:25:28

How to make different styles for two menus?

There is a menu

<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>

and style to it
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);
}

I am creating a second menu on the site based on this menu, but I don’t need to modify it much, such as color, indents.
Help to make the same menu, but so that the second menu does not pick up the styles of the first.
I try it myself, but it turns out partially, in particular I can’t change nav

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Ꮖɦɛօռ, 2019-07-20
@Theon

The problem is that the input (connector) for electric current from the power supply has broken ...

E
Exploding, 2017-08-24
@Exploding

Add a class for each nav. Different of course. For example: nav.menu-left and nav.menu-top and that's all

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question