Aaaaand, I’m back! In today’s lesson we’ll be making a simple drop-down navigation bar.
To start with, a drop-down menu is just a normal menu, an unordered list with its list items, which contains another (one or more) unordered list within one of its list items, visible only on mouse-over.
We’ll begin by creating an ordinary unordered list inside a
Inside the Portfolio list item we’ll insert another unordered list which will contain our drop-down menu.
I’ll give the main unordered list an
id="main-ul" and to the second one, an
id="second-ul" so that we can easily identify them. The buttons from the main navigation will get a
class="main-button", and the ones from the drop-down list will get a
class="dp-button". As usual, we’ll remove the bullets from the lists, the text-decoration from the links and so on; you know the drill.
Let’s leave the HTML part for now and go to our CSS file to edit what we have made so far. Let’s style the navigation bar, the unordered list and the buttons.
Next, we’ll give
position: relative; to the two lists, while the
<nav> element receives
position: absolute; so we can place it wherever we want or need. The buttons, mainly the list items, will be 110px wide and have a height of 30px. We’ll give them some color too, so we can see them. More so, we’ll center the text, both vertically and horizontally. In order to obtain a horizontal nav bar, the buttons from the main list will receive
float: left;. We also have to make the link cover the entire button, not just the text, so we’ll make the
<a> element to be as wide as the button and we’ll give it the same height.
While we’re still here, let’s set a simple hover effect for the buttons and after that, we’ll take a look to see how our navigation bar is so far.
Now that everything is set, we need to hide the second menu and to make it appear only when the cursor is over the Portfolio button. To do so, the second unordered list needs to be given a height equal to zero and, for it to disappear, the
overflow: hidden; declaration must be stated.
The last step is simple. On mouse-over, when the cursor will hover the Portfolio button, the second unordered list will increase its height to 120px, in order to show its four elements (30px * 4 = 120px).