HTML and CSS List Levels

I’m closing one of my xHTML/CSS projects soon. During the project, I needed to implement a dropdown menu and I don’t really use DHTML menus. I find that CSS with a touch of Javascript to be more manageable.

So the examples online that I hunted were from A List Apart (ALA), Nick Rigby (author of the dropdown article at ALA) and an all time CSS menu resource, Listamatic.

The tutorials were easy to understand but I faced a more general problem (that I’m embarassed of actually). I needed to understand the whole logical arrange of lists.

What do I mean by logical arrangement of lists?

Well, we all know how to make a basic list of items with HTML. It’s something like this:


<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>

That’s kid stuff. Now what I wanted to do is have a secondary list of items beneath them. So the code will end up looking like this:


<ul>
<li>Menu 1</li>
     <ul>
     <li>SubMenu1_1</li>
     <li>SubMenu1_2</li>
     <li>SubMenu1_3</li>
     </ul>
<li>Menu 2</li>
     <ul>
     <li>SubMenu2_1</li>
     <li>SubMenu2_2</li>
     <li>SubMenu2_3</li>
     </ul>
<li>Menu 3</li>
</ul>

Looks easy and doesn’t seem to have a problem right? Well, that’s where I made my ‘hidden’ boo-boo. The code messed up when I had placed the list closing at the wrong place. It’s suppose to be like this:


<ul>
<li>Menu
     <ul>
     <li>SubMenu1_1</li>
     <li>SubMenu1_2</li>
     <li>SubMenu1_3</li>
     </ul>
</li>
..

After correcting that minor mistake, I spent some time understanding the arrangement of the uls and lis in the CSS styles. If you don’t have any IDs or CLASSes then this’ll be easier. However, because the menu will be made of a list and sometimes you’d like to style it with your own images like how you normally used the swap image rollovers, you’ll want to style it on your own. Therefore, we just added an ID to the menu.


<ul id="menu">
..

After this is where the headache for me starts. I took an hour or two trying to understand what CSS UL and LI code will control the main menu and the sub menu. Once I finally understood the so called ‘logic’ behind this, then it was straight forward to me.

To style the main menu, it’s CSS needs to be like this:


ul#menu {
properties;
}
ul#menu li {
properties;
}

Then if you wanted to style the submenus, you’ll need to have a CSS like this:


ul#menu ul {
properties;
}
ul#menu ul li {
properties;
}

If you’d like to grasp this on your own, just copy the needed HTML and CSS. After that, use the background or/and border properties to test what CSS code controls what. If that isn’t enough, make the menus into links and style the links.

The dropdown was accomplished by using A List Apart’s tutorial with a touch of Nick Rigby’s tutorial. There was a missing code to make the code work with the background image property (that’s what I think.) The code was this:


ul#nav li:hover ul , ul#nav li.over ul {
display: none;
}

I think browsers like Opera and Firefox needed this to force the submenu to disappear. To find out more on the submenu, read up both ALA and Nick Rigby. If you’re just learning CSS menus, then give Listamatic a go.

Good luck.

1 thought on “HTML and CSS List Levels”

  1. Yeah, on my first time building mouse-over navigational menu with CSS and lists, I was also having some unexpected problems in IE. Firefox works fine and display all the effects correctly. BUT, IE doesn’t even cater to the mouse-over effect after I’ve added in additional CSS classes. Looks easy and simple at first, but given unexpected “effects” which took me some time to solve.

    Anyway, in general, I still find the CSS styling menu to be good in terms of maintenance cycle. At least, the HTML part looks neat, and doesn’t mess up much with server-side scripting.

Leave a comment