Доброго всем времени суток, вот такая вот проблема, нужно при ховере на элемент меню убрать рамку эту черную заливку элемента на фоне:
Посоветуйте, как лучше сделать?
html:
код<div class="wrapper-icon">
<div id="menu-icon" class="menu-nav-class"><span>☰</span></div>
</div>
<nav class="nav-menu" id="menu-nav">
<?php
wp_nav_menu(array
(
'menu_class' => 'menu',
'theme_location' => 'Головне меню',
'container' => false
));
?>
</nav>
CSS:
код#menu-nav {
width: 100%;
height: 150px;
}
.wrapper-icon {
display: none;
width: 99%;
height: 60px;
overflow: hidden;
color: #ffffff;
}
#menu-icon {
display: none;
width: 40px;
height: 35px;
margin: 10px 10px 0 0;
color: #fff;
cursor: pointer;
background: #000;
border: 1px solid #fff;
text-align: center;
}
#menu-icon span {
line-height: 35px;
font-size: 30px;
}
.menu {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 30px;
}
.menu li {
font-size: 27px;
text-transform: uppercase;
padding-top: 15px;
opacity: 0.4;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menu li a {
color: #abb3b7;
outline: none;
overflow: hidden;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menu li:hover {
opacity: 1;
}
.menu li a:hover {
color: #fff;
box-shadow: 0 10px 50px;
}