/**
 * This CSS is just for giving the menu a nice format. It has more or less nothing to do with the technique we try to
 * display in this example!
 **/

/**
 * Just resetting shit. Doing it simple. You should use a more solid resetting (http://meyerweb.com/eric/tools/css/reset/)
 **/
*{
  padding: 0;
  margin: 0;
  font:100% Arial, Helvetica, sans-serif;
}

/**
 * Surrounding structure for the menu
 * NOTE: Height must be provided to secure following elements after the menu to appear under the menu.
 *       Just providing overflow hidden will not do the trick.
 *       We do also set a background color of the whole menu container which will be the fallback if no level 2 are
 *       present at some point.
 **/
#menu{
    width: 980px;
    overflow: hidden;
    height: 55px;
    background-color: #069;
    margin: 10px 0px 0px 10px;
}

/**
 * Gives all links in the menu an basis formating - Will affect all levels in the menu!
 * Each link are set to block elements and put to 100% height so they fill out the height of the li. We need this so the
 * users mouse will flow smoothly from menu point to menu point.
 * NOTE: When we set each link to an block element IE6 will stack the block elements verticaly even if the links are alone
 *       inside an li (only one link in each li you know). To prevent this we need to set a float to the left so IE6 also
 *       looks nice.
 **/
#menu a{
    text-decoration: none;
    font-weight: normal;
    display: block;
    float: left;  /* Will affect IE6 only */
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
}

/**
 * Making the list collapse and setting all the elements to float to the left. This will make the list be presented
 * as an horisontal line. We will be placing the different level on top of each other with positioning. Please see
 * each level for information about the positioning
 **/
#menu ul, #menu li{
    float: left;
    list-style: none;
    height: 100%;
}

/**
 * Targets level 1 (ul number one) in the menu.
 * This level is positioned relative to its container.
 * NOTE: Width must be set to the same width as the menu container so the ul fills out the menu container.
 *       The widt are set in exact pixels to support IE6. If IE6 support is dropped, this value can be
 *       set to 100% instead of an exact pixel value.
 **/
#menu ul{
    background-color: #555;
    position: relative;
    width: 980px;
    font-size: 12px;
    height: 31px;
}

#menu ul li{
    cursor: pointer;
}

/**
 * Targeting each link in level 1
 * NOTE: Height is the height of the ul its placed inside minus the top padding.
 **/
#menu ul li a{
    height: 24px;
    padding-top: 8px;
    border-right: 1px solid #787878;
}

/**
 * Targets level 2 (ul number two) in the menu.
 * This level is positioned absolute to its container and placed in it's correct spot with the left and top functions
 * where top are the same as the hight of level 1.
 * This level is default set to hidden. We want to display only the first level (top level) all the time and the sibling
 * second level in the list when the URL matches an a:href in the first level.
 * NOTE: Width must be set to the same width as the menu container so the ul fills out the menu container.
 *       The widt are set in exact pixels to support IE6. If IE6 support is dropped, this value can be
 *       set to 100% instead of an exact pixel value.
 **/
#menu ul ul{
    position: absolute;
    left: 0;
    top: 31px;
    background-color: #069;
    height: 24px;
    width: 980px;
    font-size: 11px;
    cursor: default;
}

/**
 * Targeting each link in level 2
 * NOTE: Height is the height of the ul its placed inside minus the top padding.
 *       border-style are overrided since formating on level 1 will inherit to this level
 **/
#menu ul ul li a{
    height: 20px;
    padding-top: 5px;
    border-right-style: none;
}

/**
 * Just giving the "footer" a nice format.
 **/
#footer{
    width: 980px;
    margin: 10px 0px 0px 10px;
    font-size: 9px;
    text-align: right;
}

#footer a{
    color: #cccccc;
}