Override the SP CSS master page with !important

Question

I'm building a menu on a SharePoint site page and I'm having difficulties with the CSS. Everything works well outside of SharePoint, but for some reason I'm not able to override the box-shadow and the font color.

I tried using the !important in my CSS rules. I tried using !important in CSS inline-style

.dropdown-content {
    display: none;
    list-style-type: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    color: #000000;
    text-align: left;
    margin-left: -4.7em;
    margin-top: 0.89em;
    box-shadow: 5px 5px 11px #dadada !important;
}

inline : <div class = "dropdown-content" style = "box-shadow: 5px 5px 11px #dadada !important;">

here is my code for the text in the menu

<li class = "li-drop" style="color:#000000# !important;"><a href="url" onclick="return go(this);">Text</a></li>

for some reason, the box-shadow and the font color in the <a> refuse to follow.

Anyone can help me figure this out?

Answer 1

I was able to find a solution even though the font color for <a> is forced with a !important in the master CSS.

I used a <div> inside the <a> and switched the clicking zone on the entire <li> zone instead of the text within the <li>

This is what it looks like.

<li class = "li-drop"><a href="url" onclick="return go(this);"><div class = "div-drop">Text</div></a></li>