Style for a dropdown menu

This is too geeky for words, but the stylesheet works.

<title>HTML Advanced - Horizontal Dropdown Menu</title>
    <link rel="stylesheet" href="basestyles.css" type="text/css">
    <link rel="stylesheet" href="cssmenus.css" type="text/css">

    <style type="text/css">

        /* *********This page's style goes here */
        /* this is a two-level menu that can be horizontal or vertical.
        This menu is set up as a horizontal dropdown menu */

        .twoLevelMenu a {/*  set styles for all anchors in the menu */
            display:block;
            border:1px solid black;
            padding:2px 0px 2px 5px;
            margin:2px 2px 0px 0px;
            color:#ffffff;
            text-decoration:none;
            font-family: sans-serif;
            font-size:12px;
            text-align:center;
            background-color: #577;
        }

        .twoLevelMenu ul {/* set style for all lists in the menu */
            list-style:none;/* removes the bullets */
            padding:0px;/* removes the indents on all the lists */
            margin:0px;/* removes the indents on all the lists */
            font-weight: bold;
            /* if a VERTICAL MENU, uncomment the following width and set to the same value as the next rule */
            /*width: 120px;*/
            width:auto;
        }

        .twoLevelMenu li {/* style all list items */
            width:120px;
            float:left;/* this turns the list items into a horizontal menu */
            position:static;/* set up parent positioning so its child position will work */

        }    

        .twoLevelMenu li ul {/* adjust the position and width of the second-level menus */
            width:100px;/* this width is the same as the rule above */
            background-image:url(images/shim.gif); /* this is a transparent one-pixel .gif that tiles automatically and keeps the submenus from collapsing in IE when there is space between the submenu items*/
            /* if a VERTICAL MENU, use the next two settings instead */
            /*margin-top:-24px;*/ /* moves the submenu up next to the associated list item */
            /*margin-left:110px;*/ /* set to the menu width or less to overlap the flyout menus */
            position:absolute;/* allows the submenus to be hidden before the hover*/
            display:none;/* hide the submenus */
        }

        .twoLevelMenu li:hover ul { /* this is the trick that brings the submenus back */
            display:block;
        }

        .twoLevelMenu li:hover a { /* style top item menus style hovers */
            background-color:#979;
        }

        .twoLevelMenu li:hover li a { /* style unhovered submenu list items */
            background-color:#966;
        }

        .twoLevelMenu li li:hover a {
            background-color: #979;
        }

                /* ************************************** */
        </style>    

        <!-- The following is an Internet Explorer conditional comment.
        It applies styles that only IE versions less than the version 7 will understand.
        Put styles here to work around earlier versions' lack of CSS compliance.
        All other browsers will ignore the conditional comment.
         -->

        <!--[if lt IE 7]>
            <style type="text/css">
                body {
                    behavior:url(csshover2.htc); /* Makes IE play nice with all hovered elements*/
                }
            </style>    
        <![endif]-->

Comments

[Agricola]

Neat stuff. Have you seen this site?

http://css.maxdesign.com.au/listamatic/

Helpful. Also, since you seem interested in CSS, take a look at:

http://www.blueprintcss.org/