CSS jak poprawnie ustawić hover

Question

Hej. Chodzi mi o to, jak uzyskać taki efekt, ze gdy najadę kursorem na hovera w menu np Portfolio to oprócz odnośnika podświetli się również na dole obramowanie tej samej szerokości. Chodzi o to aby podświetlało się na tej samej wysokości co koniec czarnego tła. Zrobiłem to ale trochę po chłopsku, więc szukam pomysłu jak to zrobić w inny-lepszy pomysł

 

https://codepen.io/adamek91/pen/bvdajB

Answer 1

Chodziło mu raczej o taki efekt, jeżeli dobrze zrozumiałem. Tutaj jest zrobione "na szybko", żeby osiągnąć efekt, jednak są na pewno lepsze wyjścia.

https://codepen.io/arces92/pen/ZxGqvw

Na początku bym podszkolił HTML, bo lista była źle zbudowana. Porównaj sobie kod i zobaczysz o co chodzi.

Answer 2

nav>ul>li>a {
  padding: 1.7em;
  font-weight: 600;
  font-size: 15px;
}

nav>ul>li>a:hover {
  color: #ff0044;
  background-color: gold;
}

Nie wiem czy o to Ci chodziło...bo z tekstu troche też wynika jakbyś chciał powiedzieć że chesz wysuwane menu.

Mam nadzieje że pomogłem.