css – About menus on websites


I took a course in HTML and CSS and now I'm putting the learning into practice. For that, I'm trying to build a website, but I'd like to make menus similar to the one on this site " http://iswift.com.br/ ", where when hovering over the menu, it makes a nice effect and such. But as I don't have much practice, I don't know how to do it. can anybody help me?


Basically every item in the menu is duplicated, where the top item is the normal state (black background) and the bottom is hover (white background). In the hover of the menu anchor, the first item creates a negative margin at the top, so it goes up, disappears, and the item below is visible. The orange background is a hover of the anchor or list-item itself.

I recommend you read up on transitions (css3) and inspect the item code to see things in more detail.

Scroll to Top