Hey! Can’t really believe it has been so long since my last post! Shame on me! Nevertheless, I’m back and ready to finish the navigation bar, as promised. Can’t let this year pass without finishing what I’ve started, right?! So… here we go!
The drop-down menu needs to appear, so we need to create it. That’s simple! Inside the Portfolio button we’ll add a new
<nav> tag which will contain the second menu, made up of an unordered list and three list items, which means that our drop-down menu will have three buttons.
Each element will receive its own id and/or class, as follows: the second
class="second-btn". There will be something different about the drop-down menu. We’ll change the orientation of the arrows so that instead of pointing to the right, they will point to the left. To do so, the tip of the arrow will come first in our structure, and its tail will follow. Everything should look like this:
The rest is the same as the main navigation bar. The CSS part, I mean. We need to shape the buttons, position them, color them and that’s it! Here’s the CSS code:
Hope to see you back here in the new year to come! Cheers!