Drop-right Menus With Pure CSS Just for educational purposes, not to be used for real sites

[pyost 0]

I am sure you've all encountered drop-down (not to say drop-right) menus. While these may seem pretty hard to make, it is actually extremely easy. Actually, it can get rather hard when using JavaScript, but this tutorial will show you how to create good-looking "pop up" menus opening to the right with pure CSS.

 

However, I must warn you that this tutorial is more for educational purposes, then for use in real web sites. Why? Simply because the following method won't work properly in Internet Explorer (how unexpected..). I am sure this might as well work with several (JavaScript) hacks, but that's not how W3C compliant browser should behave like, is it? On the other hand, the example works perfectly fine in Firefox, and that's the browser I suggest using for accomplishing this tutorial.

 

Let's start, shall we? First, I will show you what HTML structure we will be using:

 

<ul>

<li><a href="#">Level 1 | Link 1</a></li>
<li><a href="#">Level 1 | Link 2</a></li>
<li><a href="#">Level 1 | Link 3</a></li>
<li><a href="#">Level 1 | Link 4</a></li>
<li><a href="#">Level 1 | Link 5</a></li>

</ul>

 

As you can see, here we have an unordered list, with five elements. Each of these elements is one level 1 link. Obviously, it means that this is the main part of the menu that will always be visible. Now, in order to have sub levels that appear when we hover a link, we shall insert another unordered list into the wanted link.

 

<ul>

<li>
<a href="#">Level 1 | Link 1</a>
<ul>
<li><a href="#">Level 2 | Link 1</a></li>
<li><a href="#">Level 2 | Link 2</a></li>
<li><a href="#">Level 2 | Link 3</a></li>
</ul>
</li>

<li><a href="#">Level 1 | Link 2</a></li>

<li>
<a href="#">Level 1 | Link 3</a>
<ul>
<li><a href="#">Level 2 | Link 1</a></li>
<li><a href="#">Level 2 | Link 2</a></li>
</ul>
</li>

<li><a href="#">Level 1 | Link 4</a></li>
<li><a href="#">Level 1 | Link 5</a></li>

</ul>

 

Just a notice - we don't insert the new list between <a> </a> tags, but rather between <li> </li> tags. Anyhow, now we've added two sub menus, one (with 3 links) connected to the first link, and the other (with 2 links) connected to the third. Finally, we shall add another (third) level with 4 links, which will be connected to Link 2, Level 2.

 

<ul>

<li>
<a href="#">Level 1 | Link 1</a>
<ul>
<li><a href="#">Level 2 | Link 1</a></li>
<li>
<a href="#">Level 2 | Link 2</a>
<ul>
<li><a href="#">Level 3 | Link 1</a></li>
<li><a href="#">Level 3 | Link 2</a></li>
<li><a href="#">Level 3 | Link 3</a></li>
<li><a href="#">Level 3 | Link 4</a></li>
</ul>
</li>
<li><a href="#">Level 2 | Link 3</a></li>
</ul>
</li>

<li><a href="#">Level 1 | Link 2</a></li>

<li>
<a href="#">Level 1 | Link 3</a>
<ul>
<li><a href="#">Level 2 | Link 1</a></li>
<li><a href="#">Level 2 | Link 2</a></li>
</ul>
</li>

<li><a href="#">Level 1 | Link 4</a></li>
<li><a href="#">Level 1 | Link 5</a></li>

</ul>

 

I know the code might seem a bit confusing, but I can't indent it when using the HTML tag Now, copy this code into a HTML file, save it, and then open it. What did you get? Not what we need yet, but you can see the structure of the menu. Now that we have (almost) completed the HTML part, let's move on to the CSS part.

 

We will start with defining some styles for the <ul> tag:

 

ul {	list-style: none;	margin: 0;	padding: 0;	width: 150px;}

What do we have here? list-style: none removes the bulletins (you know, those dots and squares), margin and padding remove the indenting and width defines how much space (horizontally) the menu will take up. If you preview the page now, you will see all the links one below each other. Let's put these links into boxes/rectangles.

 

li {	border-top: 1px solid #dedede;	border-left: 1px solid #dedede;	border-right: 1px solid #dedede;}ul {	border-bottom: 1px solid #dedede;}li a {	display: block;	color: #000000;	text-decoration: none;	padding-left: 5px;	padding-right: 5px;	font-family: Arial;	font-size: 12px;	line-height: 20px;}li a:hover {	background-color: #f0f0f0;}

In the li part we are "creating" the box. We haven't defined border-bottom because then we would have double borders (top + bottom), and we don't want that. That's why we have added it to the ul part.

 

Moving on to the li a code. All but the first line is somewhat connected to how the link will look. By writing display: block, we have told the browser that the link (<a> </a>) will take up as much space as it can, therefore becoming a box with the border defined in the li code. Try previewing the page now, so you can see what part of the box is hyperlinked - yes, the whole box! Obviously, the li a:hover part determines what happens when we hover over a linked area

 

So now we are finally getting something. Feel free to ignore those double border appearing at some places, this will be sorted out as soon as we hide those parts. And how are we going to do that? By using relative/absolute positioning. In short, this will help us position a sub menu according to its parent link. Very ease to accomplish, yet very powerful. Here's what we will be adding to the CSS code:

 

li {	position: relative;}li ul {	display: none;	position: absolute;	top: -1px;	left: 148px;}li:hover ul {	display: block;}

Now, this might be the hardest part to understand. The position: relative in the li code tells the browser that any elements "below" the li tag and with position: absolute should be positioned relatively to <li>. Without top and left, the cell and the child list would overlap. Since we want to move the child list right, we use left: 148px;, and top: -1px; because of the border. When you try it out, you will see what I am talking about.

 

But wait, it's not working right! When we hover over the first link, we get two submenus, and we only want one. That is achieved by adding additional CSS attributes that tell the browser not to show the child of the child Practically, this is what we need:

 

li:hover ul li ul {	display: none;	position: absolute;	top: -1px;	left: 148px;}li:hover ul li:hover ul {	display: block;}

So, when we are hovering over the main level item, it will remain hidden. But when we hover of the submenu item, it will be shown. You would need to add a modification of this every time you add a new submenu.

 

And now everything is working!

 

Finally, I said it once, but will say it again: this tutorial will just help you understand better how CSS works and what it can be used for. Don't use this on your own web sites, since you will put off visitors using Internet Explorer.

 

If you have any more enquires concerning the code, feel free to ask me.

 

Oh, and here is the complete CSS file

 

ul {	list-style: none;	margin: 0;	padding: 0;	width: 150px;	border-bottom: 1px solid #dedede;}li {	border-top: 1px solid #dedede;	border-left: 1px solid #dedede;	border-right: 1px solid #dedede;	position: relative;}li a {	display: block;	color: #000000;	text-decoration: none;	padding-left: 5px;	padding-right: 5px;	font-family: Arial;	font-size: 12px;	line-height: 20px;}li a:hover {	background-color: #f0f0f0;}li ul {	display: none;	position: absolute;	top: -1px;	left: 148px;}li:hover ul {	display: block;}li:hover ul li ul {	display: none;	position: absolute;	top: -1px;	left: 148px;}li:hover ul li:hover ul {	display: block;}

[miCRoSCoPiC^eaRthLinG 0]

Good one man Makes the inner workings seem really simple.. Cheers,m^e

[toby 0]

Wow.. nice one.

[Saint_Michael 3]

not bad it could save me the time of reverse engineering a left drop down menu.I seen menu's at cssplay that up inside of down for those who want footer links and such. Of course for some strange reason though when I look at tutorials for suckerfish drop downs it looks greek to me, most likely due to the fact can't bring down the menu's right when it's all crunch together like that.

[nightfox1405241487 0]

Wow... very nice! It seems very nice! I'll have to see how it works someday.[N]F

Edited January 10, 2007 by nightfox (see edit history)

[CaptainRon 0]

Thats a cool article. I will try putting in efforts to make it run on IE if i find time. I guess it shall run on IE7...

[delivi 0]

that is a great peice of code thanx for sharing, it would be better if you added a live working page for us to see it in action. Edited February 25, 2007 by livingston (see edit history)

[niran 0]

Thats a neat a cool tutorial friend! Dropdown menus are now an essential part of each and every site!

thanks for sharing tha5t with us friend

 

Niru