“Drop” <li> hover in bootstrap menu

Question

so the problem is, i have to do an animation for hover on bootstrap nav that looks like this:

And animation i need is the color-line going to the bottom of li with the rest of "new" li object that looks almost the same but has it different background color, so something like this:

I realised that it's (probably) impossible to change the position of the border-top, so do i need some other object above every li, that will 'cover' it on hover? I really have no idea how to create that. Thank you so much for any help.

Answer 1

You can create overlay with :after pseudo element and change it's height to 0 on hover. Also you can add top: 100% and that will create slide to bottom transition.

 * { box-sizing: border-box; } ul { display: flex; max-width: 400px; padding: 0; list-style-type: none; margin: 0 auto; } li { flex: 1; position: relative; padding: 20px 0; text-align: center; border-right: 1px solid #D8D9DB; } li:after { position: absolute; transition: all 0.3s ease-in; content: ''; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: #E3E3E5; z-index: -1; border-top: 5px solid black; } li:hover:after { height: 0; bottom: 0; top: 100%; } 

 <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> 

Or you can remove height: 0 and bottom: 0 and just use top: 100% and you will get something like this

 * { box-sizing: border-box; } ul { display: flex; max-width: 400px; padding: 0; list-style-type: none; margin: 0 auto; } li { flex: 1; position: relative; padding: 20px 0; text-align: center; border-right: 1px solid #D8D9DB; } li:after { position: absolute; transition: all 0.3s ease-in; content: ''; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: #E3E3E5; z-index: -1; border-top: 5px solid black; } li:hover:after { top: 100%; } 

 <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> 

Answer 2

I think this is what you mean but I might be wrong. JSFIDDLE

div {
  width: 200px;
  height: 200px;
  background-color: grey;
  border-top: 3px solid black;
}

div:hover {
  background-color: #aaa;
  border-bottom: 3px solid black;
  border-top: none;
}