This page has been robot translated, sorry for typos if any. Original content here.

Drop-down menus using CSS

Everyone who has ever created drop-down menus is familiar with the number of scripts required for this. Meanwhile, using well-structured HTML-code and simple CSS-rules, you can create a nice drop-down menu that is easy to change and supplement, and at the same time it will work in a variety of browsers, including Internet Explorer. And most importantly for you, fans of "clean" code - no JavaScript! (In fact, a small script is still needed, but not at all for what you thought.)

Here is an example of the current menu

Create a menu

The first and most important stage in the creation of our menu is the construction of its structure. It is best to do this using an unnumbered list in which submenus are placed that act as lists within the items of the parent list. Does this sound abstruse? In fact, it's very simple:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">WebDesign</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">DomainNames</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul>

That's it: simple HTML code, accessible and easily editable.

Bringing Beauty

Look at the example above. You will see a rather boring list of items. And I promised you that he will be cute! Let's add a few styles.

The first thing to do is remove the indents and markers in the unnumbered list, and then set the width of the menu items.

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

Now we need to set the position of the list items. Fortunately, they will be located vertically by default, which is what we need. However, we need to set the value for position as relative, and all because we need to relative to them to absolutely position the submenu.

ul li {position: relative; }

We take a sub-menu. We want each submenu to appear to the right of the parent menu item at the moment when the cursor is over this item.

li ul {position: absolute; left: 149px; top: 0; display: none; }

Using the attributes "left" and "top", we can absolutely position each submenu within the menu item of the ancestor. You'll notice that I set the "left" attribute to 149px (one pixel less than the width of the parent point), this allows the submenu to overlap the main menu without creating a double border. (You will understand what I mean, a little later.)

We also need to set the "display" attribute to "none", since we do not want to see the submenu when opening the page.

Well, we now have a skeleton , but it still looks nondescript. Let's set the styles for the links.

ul li a {display: block; text-decoration: none; color: # 777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }

I applied styles to the links to my taste, but they can easily be changed to those that you like. It is important to assign the value "block" to the "display" attribute, because we want each link to occupy all the space allocated for it inside the list element that contains it.

So, it looks better , although Internet Explorer users for Windows may disagree with you. Unfortunately, IE Win understands line breaks between links in our beautifully designed HTML code as an empty space. Because of this in IE, you see that the links do not fit closely to each other. However, this IE bug can be circumvented.

/ * Fix IE. Hide from IE Mac \ * / * html ul li {float: left; } * html ul li a {height: 1%; } / * End * /

Above we applied the Holly Hack trick, which hides these rules from all browsers except IE Win. Excellent. Note that the height rule was added: 1%. Unfortunately (again!), Struggling with one error, we stumbled upon another, to combat which we need to set a value for the "height" attribute, so that the links are displayed as block elements.

Also note that we forgot to "close" the menu block. Add an additional lower limit to each element of the list. So, here's the full list of styles for ul:

ul {margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; }

Everything turned out well, and now everyone can see a beautiful, but non-functioning menu .

Let's make it work

And now - the most fun. We need to make the submenus appear at the moment when the cursor is above the list item.

li: hover ul {display: block; }

Voilà! And here it is - our menu - in action.

"Yo-mine! It works!" one of you will shout. - "Wow!"

Okay, fine, but damn IE / Win again broke all the beauty - does not want to do what he says. He understands the pseudo-class: hover only for the <a> tag - so li: hover, on which the appearance of the submenu is tied, does not tell him anything.

A droplet of JavaScript will bring IE to life (the line break is marked with a " " symbol - Ed.):

  startList = function () {if 
 (document.all && document.getElementById) {navRoot = 
 document.getElementById ("nav");  for (i = 0; i <navRoot.childNodes.length; i ++) { 
 node = navRoot.childNodes [i];  if (node.nodeName == "LI") { 
 node.onmouseover = function () {this.className + = "over";  } 
 node.onmouseout = function () {this.className = this.className.replace » (" over "," ");  }}}}} 
 window.onload = startList; 

So, the rules for hover are:

li: hover ul, li.over ul {display: block; }

We also need to additionally associate JavaScript with our main list, adding this:

<ul id = "nav">

I hope, considering all the above, any of you can see a simplified version of the current menu .

Jumping menu in IE5.01 for Win

IE5.01 for Windows users will notice how the menu jumps around when you hover over any of the list items. The problem is easily solved by making changes to our previous trick:

/ * Fix IE. Hide from IE Mac \ * / * html ul li {float: left; height: 1%; } * html ul li a {height: 1%; } / * End * /

Mysterious bug of the sixth version of IE ...

While working on the article, I discovered a strange bug, which, it seems to me, is only observed in IE6. For "li a" you need to set the background, otherwise if the drop-down submenu is larger (in height) than the parent menu itself, then some of the links will simply disappear from the screen before you can click on them. It's strange! Try to see it yourself.

Create your own menu

That's all! A method that does not contradict the standards to create beautiful horizontal drop-down menus. All you need to do is add a few of your styles for the hover, creating your own menu. to give a boost to your imagination, I added a couple more strokes in to the menu . Enjoy!