NOTE: This is a follow-up from a other tutorial, first do that one!!
CLIK HERE FOR THE TUTORIAL

This tutorial expands on my last CSS pop up menu tutorial.

This second part focuses on changing the menu so that it is horizontal, with the pop ups dropping downwards.

Essentially, the code itself works in the same way and stays pretty similar. The HTML code stays exactly the same as it was and we'll just edit the CSS to achieve what we're after.

First up we need to change this part of the CSS:
-----------------------------------------------------------
ul {
list-style: none;
width: 125px;
}
-----------------------------------------------------------
into:
-----------------------------------------------------------
ul {

list-style: none;

}
-----------------------------------------------------------

By removing the "width: 125px" part, the menu is not limited in its width, and so each menu item has room to sit next to each other.

With this one change to our original code the menu already spans horizontally, click here to see an example.

As you can see, a bit of styling is needed to make it look better. So the next step is to change this block of code:

-----------------------------------------------------------
ul li {
border-bottom: 1px solid #FFF;
float: left;
position: relative;
}
-----------------------------------------------------------

into:

-----------------------------------------------------------
ul li {
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
float: left;
position: relative;
}
-----------------------------------------------------------

This will give each menu item a white right hand border - separating each menu item in the style we're using in the example.

Check here what it looks like now.

Now comes the part that will make the "pop ups" drop downwards. We need to change this part of the code:

-----------------------------------------------------------
ul li ul {
list-style: none;
position: absolute;
left: 140px;
top: 0;
display: none;
width: 125px;
border-left: 1px solid #FFF;
}
-----------------------------------------------------------

into:

-----------------------------------------------------------
ul li ul {
list-style: none;
position: absolute;
left: 0;
top: 100%;
display: none;
width: 125px;
border-top: 1px solid #FFF;
}
-----------------------------------------------------------

All that's changing now is the "top" and "left" values.

Previously these values told the "pop ups" to appear to this side (by setting "left" to the width of a menu item), now though, we want it below.

So the left value is set to 0 (so its in line with its parent menu item) and set the top to 100% (so it appears after the full height of its parent vertically).

For styling purposes "border-left" has been changed to "border-top" as it is the top of the menu, not the left, that is now adjacent to the main menu.

As you can see here, this places the dropdown below the menu.

Finally, we'll need to change the secondary pop up menu (products) to behave as it used to (to the side). By replacing this code:

-----------------------------------------------------------
ul li ul li:hover ul { display: block; }
-----------------------------------------------------------

into:

-----------------------------------------------------------
ul li ul li:hover ul {
display: block;
position: absolute;
left: 140px;
top: -1px;
border-left: 1px solid #FFF;
}
-----------------------------------------------------------

It will behave so. The above code is the same as the code from the last tutorial, only this time it is only applied to the secondary navigation.

Now we have a fully functioning horizontal pop up menu! Click here to see it in action!

I hope you enjoyed it, and now will use it in all your wonderfull sites!!!