Хочу сделать border-radius к элементу
Хочу сделать border-radius к элементу , но делается только к ссылке Помогите пожалуйста разобраться в чем проблема.
nav {
margin: 0;
padding: 0;
}
nav > ul {
list-style: none;
border: 1px solid #855a21;
display: flex;
align-items: stretch;
margin-top: 5px;
}
nav > ul li {
display: flex;
width: 100%;
position: relative;
}
nav > ul li a {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
background: rgb(229,187,129); /* Old browsers */
background: -moz-linear-gradient(top, rgba(229,187,129,1) 0%, rgba(124,76,13,1) 70%, rgba(158,100,32,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(229,187,129,1) 0%,rgba(124,76,13,1) 70%,rgba(158,100,32,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(229,187,129,1) 0%,rgba(124,76,13,1) 70%,rgba(158,100,32,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5bb81', endColorstr='#9e6420',GradientType=0 ); /* IE6-9 */
font-size: 11px;
font-weight: 700;
padding: 7px 15px 7px;
color: #fff;
text-decoration: none;
text-align: center;
border: 1px solid #f4e2c8;
outline: 1px solid #855a21;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 6px;
}
nav ul li a:hover {
color: #4e2c1e;
background: rgb(255,249,224);
background: -moz-linear-gradient(top, rgba(255,249,224,1) 0%, rgba(237,206,140,1) 39%, rgba(237,206,140,1) 79%, rgba(237,206,140,1) 79%, rgba(255,249,224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,249,224,1) 0%,rgba(237,206,140,1) 39%,rgba(237,206,140,1) 79%,rgba(237,206,140,1) 79%,rgba(255,249,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,249,224,1) 0%,rgba(237,206,140,1) 39%,rgba(237,206,140,1) 79%,rgba(237,206,140,1) 79%,rgba(255,249,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff9e0', endColorstr='#fff9e0',GradientType=0 ); /* IE6-9 */
}
.submenu {
display: none;
position: absolute;
left: 0px;
top: 100%;
padding: 0;
border: none;
}
.submenu > li {
width: 190px;
}
nav ul li:hover .submenu {
display: block;
border: 1px solid #bfa485;
}
nav ul li:hover .submenu li a {
border: none ;
outline: none;
background: #fcebc6;
color: #4e2c1e;
justify-content: flex-start;
}
nav ul li:hover .submenu li a:hover {
background: #d8af75;
}
.topmenu .prices {
border-right: none;
}
.topmenu .apllication {
border-left: none;
outline: none;
padding-left: 250px;
padding-right: 30px;
}
<nav>
<ul class="topmenu">
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#">ПОДОБРАТЬ ПЕРСОНАЛ</a>
<ul class="submenu">
<li><a href="#">О НАС</a></li>
<li><a href="#">ЗАДАТЬ ВОПРОС</a></li>
<li><a href="#">ЭТО ИНТЕРЕСНО</a></li>
<li><a href="#">ОТЗЫВЫ</a></li>
</ul>
</li>
<li><a href="#" class="prices">ЦЕНЫ</a>
</li>
<li><a href="#" class="apllication">ОСТАВИТЬ ЗАЯВКУ</a></li>
<li><a href="#">ОСТАВИТЬ ВАКАНСИЮ</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul>
</nav>