Why does text-decoration: underline not work?

css, hover, html

Solution

You have `text-decoration: none;` in `style.css`. This CSS is telling the browser to render all hyperlinks with no text decoration. You'll need to override that CSS by supplying the `!important` declaration.

So for the links that you would like to be underlined, simply add the `!important` declaration to its corresponding CSS ID or Class.

Example

Change from:

a.exampleLinkClass{text-decoration:underline}

to this:

a.exampleLinkClass{text-decoration:underline !important}

Problem

On a a website I am currently working on, I have issues with underlining links on hover. Although declaring text-decoration: underline on hovering links, it doesn't work properly. I can't explain it myself. Look at the website itself (it's the links on the bottom right corner): http://nils.zamaitat.de/#contact It's the same with the dropdown menu "Projects" on the home section: The links that fade in can't handle the underlining properly as well: http://nils.zamaitat.de/#home This is what I have in my CSS: ``` section.contact .links ul > li a:hover { text-decoration: underline; } nav ul li ul > li a:hover { text-decoration: underline; } ``` Thank you very much in advance!

Original source