How do I create an underline when I hover over links in nav bar?

Question

I want to create an underline when I hover over the links in my navigation bar. I'm not sure which id I should be targeting. Here's my JFiddle: https://jsfiddle.net/gzycz4h8/

Thanks in advance.

<ul id="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Writing</a></li>
  <li><a href="#">Multimedia</a></li>
  <li><a href="#">Resume</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Are you looking for a java-script answer? – Dirk Horsten May 12 '16 at 20:00 — Dirk Horsten, May 12 '16 at 20:00

score 2 · Answer 1 · answered May 12 '16 at 19:33

2

are you looking for something like this ?

#nav {
  padding: 10px 0;
  width:700px;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display:block;
  text-decoration: none;
  -webkit-box-shadow: 0 2px 10px -12px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}

#nav li {
  display: inline-block;
  margin: 5px;
  text-transform: uppercase;

}
#nav li a {
  text-decoration:none;
}
#nav li a:hover {
    text-decoration: underline;
    text-decoration-color: black;
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;

}

answered May 12 '16 at 19:33

Dhaval Chheda

4,637
5
24
44

Yes, but I would like the transition when I hover over my links, and I am still unable to change the color of the link. Not sure which ID I should be targeting. @Dhaval Chheda – dancemc15 May 12 '16 at 19:39
for changing anything for the link it should be the ..best way to do styling is open chrome and do inspect element and see what styles are applied to it and then you can modify in the developer tools itself and see if you are happy with what you get..and for transitions try something like this on and not on a:hover transition: all 2s; – Dhaval Chheda May 12 '16 at 19:55
I changed the transition on . However, it still is not doing the transition. Is something blocking it? Updated JFiddle: https://jsfiddle.net/gzycz4h8/6/ – dancemc15 May 12 '16 at 20:05
check this post http://stackoverflow.com/questions/15489203/underline-css3-transition – Dhaval Chheda May 12 '16 at 20:22

score 2 · Answer 2 · answered May 12 '16 at 20:15

2

The most simple solution would be:

li a {
  text-decoration:none;
}

li a:hover {
    text-decoration: underline;
}

https://jsfiddle.net/LvLsckzw/

answered May 12 '16 at 20:15

Reto

1,305
1
18
32

score 1 · Answer 3 · answered May 12 '16 at 19:44

1

Or something like this: https://jsfiddle.net/m16gggk1/1/

#nav {
  padding: 0;
  width:700px;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display:block;
  text-decoration: none;
  -webkit-box-shadow: 0 2px 10px -12px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}

#nav li {
  display: inline-block;
  margin: 0 5px;
  text-transform: uppercase;
  border-bottom:2px solid #fff;

}
#nav li a {
  text-decoration:none;
}
#nav li a:hover {
  color:red;
}
#nav li:hover {
    border-bottom:2px solid red;


}

answered May 12 '16 at 19:44

Rachel S

3,780
3
24
37

How can I create the transition though when I hover over my links? I want a delay when I hover over my text. I've included the transitions in my css – dancemc15 May 12 '16 at 19:46
You could have added them in yourself ;) but here you go: https://jsfiddle.net/m16gggk1/2/ – Rachel S May 12 '16 at 19:47
It's weird that I can't do it with text-decoration-underline. I think I would prefer that since with border, it actually makes everything else shift a bit? – dancemc15 May 12 '16 at 19:49
Sorry, and one more question. Why do you have 2 border bottoms? Thanks for being helpful – dancemc15 May 12 '16 at 19:51
1

If I just add a red border for hovering, the navbar will be jumpy each time you hover over a link because it extends the whole navbar. Therefore I added a white border to always be there (it looks hidden) to eliminate the jumpiness on hover. – Rachel S May 12 '16 at 20:08
Hey, I used the idea in this above js fiddle but when I hover over the nav-link, the content beneath in the container below the nav bar gets pushed down due to the generation of the bottom border. How should I prevent the down pushing? – Meet Gondaliya Jan 19 '22 at 10:02

How do I create an underline when I hover over links in nav bar?

3 Answers3