Override the SP CSS master page with !important
Вопрос
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?
Решение
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>