Как правильно убрать черную обводку на фоне?

Доброго всем времени суток, вот такая вот проблема, нужно при ховере на элемент меню убрать рамку эту черную заливку элемента на фоне:

5d00c8bca1507350744640.jpeg

Посоветуйте, как лучше сделать?

html:
код

<div class="wrapper-icon">
        <div id="menu-icon" class="menu-nav-class"><span>&#9776;</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;
}

  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы