Custom secondary menu - by MJ - on WordPress WooCommerce support

Hi
I have created the secondary menu for my site and use below CSS to style it. it is working well, but the issue is it effects other menus in the page. for example i made a menu with widget in header and it gets the exact style which i dont want. https://prnt.sc/1qld4pv

how can i turn below CSS into a class type code that be used only on specific menu. Or any other solution to exclude below code from other menus in the website.

/* Secondary menu */
.menu-element .menu li>a:hover {
background-color: #e1e1e1;
border-radius: 6px;
}
.menu-element .menu li>a {
margin-top:10px;
margin-bottom:5px;
line-height:1.2em;
font-weight:400;
font-size:14px;

}

.menu-element .menu-item .item-link{
padding-right:7px;
padding-left:7px;
padding-top:5px;
padding-bottom:5px;
}