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?

  • are you need to reflect your style to <a> tag specifically for Text ? – Mohamed El-Qassas MVP Oct 4 '16 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 Oct 4 '16 at 13:26
  • yes, the <a> tag needs to show as text in the menu. – Fred Oct 4 '16 at 13:26
  • HI Dylan, I tried using selectors to increase the specificity but it's still ignoring it. – Fred Oct 4 '16 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 Oct 5 '16 at 12:31

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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