TJKDesign: Home Page
ez-css Putting the 'less' in table-less layouts. css-101 logo

TJKDropDown Menu

Basic Markup and CSS

We start with an Unordered Lists structure:

<ul id="zUL">
  <li><a href="#">1st Set of Links</a>
	<ul>
	  <li><a href="Link 11">Link 11</a></li>
	  <li><a href="Link 12">Link 12</a></li>
	  <li><a href="Link 13">Link 13</a></li>
	</ul>
  </li>
  <li><a href="#">2nd Set of Links</a>
  	<ul>
	  <li><a href="Link 21">Link 21</a></li>
	  <li><a href="Link 22">Link 22</a></li>
	  <li><a href="Link 23">Link 23</a></li>
	  <li><a href="Link 24">Link 24</a></li>
	  <li><a href="Link 25">Link 25</a></li>
	</ul>
  </li>
</ul>

It looks like this:

We want the 2 top level List Items ("1st Set of Links" and "2nd Set of Links") to display next to each other instead of under each other.

After adding the following CSS rules we get what's in Figure A:

#zUL,#zUL ul {padding:0;margin:0}
#zUL li ul a {margin-left:1em}
#zUL li {
	float:left;
	width:9em;
	position:relative;
	list-style-type:none;
	font-weight:600
}

The purposes of these rules:

  1. We remove padding and margin from the Unordered Lists (parent and child),
  2. We apply a left margin to the nested Unordered Lists - just for the look,
  3. We float the elements to display them side by side, we give them a width (floats need a width), we use "position:relative" to prevent an MSIE Mac bug, we "turn-off" the display of bullets and we make the LIs bold (just for the look).

Take note Note that I had to declare some height in the CSS I used to style the fieldset below. Having floats for its only content, this box would totally collapse without vertical "layout".

Figure A

Now we want to hide the nested ULs, the ones that contain the sub-links.

After adding the following CSS rule we get what's in Figure B:

#zUL li ul {visibility:hidden}

Take note Note that visibility:hidden (as well as display:none) hides elements from screen-readers. See pushing the envelope to find out about a solution that better addresses accessibility issues.

Figure B

Qui in ea voluptate sed ut perspiciatis unde omnis ullam corporis suscipit laboriosam. Qui ratione voluptatem sequi nesciunt. Dicta sunt explicabo. Omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? Et expedita distinctio. Id quod maxime placeat facere possimus, sed quia non numquam eius modi nam libero tempore. Consectetur, adipisci velit, dicta sunt explicabo.

Take note The dummy text is there to demonstrate some behaviors related to the CSS we're using.

As you can see above, the ULs didn't really disappeared, the HTML elements flow the same way they used to, creating an empty spot in the layout. visibility:hidden hides an element alright but does not remove it from the layout as display:none does.

To "lift" the ULs from the flow, we have to add a declaration to the same rule we used to hide the nested Unordered Lists.

After adding the following CSS declaration we get what's in Figure C:

#zUL li ul {
	visibility:hidden;
	position:absolute
}
Figure C

Qui in ea voluptate sed ut perspiciatis unde omnis ullam corporis suscipit laboriosam. Qui ratione voluptatem sequi nesciunt. Dicta sunt explicabo. Omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? Et expedita distinctio. Id quod maxime placeat facere possimus, sed quia non numquam eius modi nam libero tempore. Consectetur, adipisci velit, dicta sunt explicabo.

As you can see above, the ULs are gone but the paragraph in the fieldset follows the top level List Items instead of siting underneath them. This is normal behavior, it is because these elements are floats. We need now to get them "out of the way".

To do so, we style the following element in the markup, the paragraph.

After adding the following CSS rule we get what's in Figure D:

fieldset p {clear:left}
Figure D

Qui in ea voluptate sed ut perspiciatis unde omnis ullam corporis suscipit laboriosam. Qui ratione voluptatem sequi nesciunt. Dicta sunt explicabo. Omnis dolor repellendus. Nisi ut aliquid ex ea commodi consequatur? Et expedita distinctio. Id quod maxime placeat facere possimus, sed quia non numquam eius modi nam libero tempore. Consectetur, adipisci velit, dicta sunt explicabo.

Nothing happens yet. So far this fieldset shows only the 2 top level List Items with no signs of nested ULs.
The magic starts next page.