Answer the question
In order to leave comments, you need to log in
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>
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);
}
Answer the question
In order to leave comments, you need to log in
The problem is that the input (connector) for electric current from the power supply has broken ...
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question