title: "Drop" <li> hover in bootstrap menu
body: <p>so the problem is, i have to do an animation for hover on bootstrap nav that looks like this:
  <a href="https://i.stack.imgur.com/44UgK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/44UgK.jpg" alt="bootstrap nav, border-top"></a></p>
  
  <p>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:
  <a href="https://i.stack.imgur.com/kPYBi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kPYBi.jpg" alt="li after animation"></a></p>
  
  <p>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.</p>