0

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?

Improve this question
5
  • are you need to reflect your style to <a> tag specifically for Text ?
    – Mohamed El-Qassas MVP ♦
    Commented Oct 4, 2016 at 13:20
  • You shouldn't need to use !important. Have you tried adding selectors to increase the specificity of your styles? Also, have you investigated what selectors SharePoint is using that causes your styles to be ignored? You might be able to use exactly those to create a rule that has more specificity and thus override the SharePoint style.
    – Dylan Cristy
    Commented Oct 4, 2016 at 13:26
  • yes, the <a> tag needs to show as text in the menu.
    – Fred
    Commented Oct 4, 2016 at 13:26
  • HI Dylan, I tried using selectors to increase the specificity but it's still ignoring it.
    – Fred
    Commented Oct 4, 2016 at 13:30
  • I finally figured the issue. Our version of SP doesn't support CSS3. Therefore, box-shadow will not work. The font color for <a> is already forced with a !important in the master CSS change and can't be changed for business reasons. I will create a box shadow effect by overlapping 2 <div>.
    – Fred
    Commented Oct 5, 2016 at 12:31

1 Answer 1

Reset to default
0

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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.