<nav class="main-nav">
<ul class="product-menu">
<li>
<a href="#">
<span class="">ОЧИЩЕНИЕ</span>
</a>
</li>
<li>
<a href="#">
<span class="note">для лица</span> <span class="title">CLASSIC</span></a>
</li>
<li>
<a href="#">
<span class="note">для лица</span><span class="title">PREMIUM</span>
</a>
</li>
<li>
<a href="#">
<span class="">ДЛЯ ТЕЛА</span>
</a>
</li>
</ul>
</nav>
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.main-nav ul {
padding: 0;
font-size: 0;
text-align: center;
}
.main-nav li {
display: inline-block;
list-style: none;
color: #fff;
vertical-align:middle;
line-height:30px;
padding:15px 10px;
}
.product-menu li {
background: #1a79bb;
}
.product-menu li a {
display: inline-block;
position: relative;
}
.product-menu li a span {
font-size: 18px;
display: block;
}
.note {
position: absolute;
top:-15px;
text-alighn:center;
right: 0;
left: 0;
}
.title {
position: relative;
top:10px;
}
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<label title="добавить товар в сравнение">
<input class="compare" type="checkbox" data-id="199">
<span class="compareLabel">
<i class="fa fa-circle-o" aria-hidden="true"></i>
Сравнить
</span>
</label>
input[type=checkbox] {
display: none;
}
.compareLabel {
color: #98a4a7;
font-weight: normal;
font-size:14px;
line-height: 24px;
vertical-align: top;
display: inline-block;
}
.compareLabel i {
line-height: 24px;
font-size: 24px;
vertical-align: top;
display: inline-block;
}
.dropmenu {
/*display: flex;*/
width: 50%;
display: table;
}
.dropmenu li {
margin: 0 30px;
position: relative;
/*border:1px solid red;*/
display:table-cell;
}
.dropmenu li:after {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: #4ec7e5;
border-radius: 50%;
top: 5px;
left: 50%;
}