Jump to content
xisto Community
pyost

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

Recommended Posts

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;}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.