You have 6 points of menu, respectively, the width shall be 100 per cent/6 = 16.6 per cent, and the references shall be 100 per cent width:.top-menu-ul {
margin: 0;
padding: 0;
height: 52px;
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.65);
}
.top-menu-li {
list-style-type: none;
float: left;
text-align: center;
width: 16.6666%;
}
.top-menu-a {
line-height: 52px;
display: block;
width: 100%;
border-right: 1px solid #df4242;
border-left: 1px solid #df4242;
background-image: -moz-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
text-decoration: none;
font-size: 18px;
color: white;
}
.top-menu-a:hover {
background: #df4242;
} <div class="header-menu">
<ul class="top-menu-ul">
<li class="top-menu-li"><a href='#' class="top-menu-a">Компания</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Каталог</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Новости</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Отзывы</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Заявка</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Контакты</a></li>
</ul>
</div>But you have to understand that on the 320px screens, 768px, it won't look very beautiful. Then you'd better use the media questions:.top-menu-ul {
margin: 0;
padding: 0;
height: 52px;
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.65);
}
.top-menu-li {
list-style-type: none;
float: left;
text-align: center;
width: 16.6666%;
}
.top-menu-a {
line-height: 52px;
display: block;
width: 100%;
border-right: 1px solid #df4242;
border-left: 1px solid #df4242;
background-image: -moz-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%);
text-decoration: none;
font-size: 18px;
color: white;
}
.top-menu-a:hover {
background: #df4242;
}
@media screen and (max-width:768px){
.top-menu-li {
display: block;
width: 100%;
}
} <div class="header-menu">
<ul class="top-menu-ul">
<li class="top-menu-li"><a href='#' class="top-menu-a">Компания</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Каталог</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Новости</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Отзывы</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Заявка</a></li>
<li class="top-menu-li"><a href='#' class="top-menu-a">Контакты</a></li>
</ul>
</div>