How do I get this CSS text-decoration override to work?

Question

Some days I swear I\'m going mad. This is one of those days. I thought my CSS was fairly straight-forward here, but it just doesn\'t seem to be working. What am I missing?

Answer 1

I ran into a similar issue when using an external theme/CSS, so I couldn't modify it to remove the text-decoration: none;. In my case, I had a child element with a link, but the link wasn't being underlined as expected. I tried using display: inline-block; as others mentioned, but it has no effect.

What worked for me was overriding the text-decoration as you had done, but also including !important to force it to override the parent's text-decoration.

// Defined in an external CSS, so I couldn't modify it.
.footer {
    text-decoration: none;
}

// In my CSS file.
.footer a {
    text-decoration: underline !important;
}

So for your particular example, I imagine this may do the trick (I did not test it to confirm):

ul > li > ul > li {
    text-decoration: none !important;
}