i2p.www/i2p2www/static/styles/mainmenu.css

/*==============================================================================

    GRC multi-level script-free pure-CSS menuing system stylesheet.
   This code is hereby placed into the public domain by its author
   Steve Gibson. It may be freely used for any purpose whatsoever.

    Computed Geometries:    with a default 12px font, 1.0em == 12px and
    1px == 0.08333em.
    Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.

                      PUBLIC DOMAIN CONTRIBUTION NOTICE
   This work has been explicitly placed into the Public Domain for the
    benefit of anyone who may find it useful for any purpose whatsoever.

==============================================================================*/

 /*========================= TOP OF THE MENU CASCADE =========================*/

#cssmenu {
    position:relative;        /* establish a menu-relative positioning context */
    float:left;                                     /* play nicely with others */
    margin:0;
    padding:0;
    border:0;
    height:24px;                                  /* the menu's overall height */
}

#cssmenu img {
    vertical-align: top;      /* prevent images from being pushed down by text */
}

#cssmenu ul {
    margin:0;
    list-style-type:none;          /* we don't want to view the list as a list */
    line-height:1.5em;           /* globally set the menu's item spacing. note */
}                               /* this must be 1.0 or 1.5 or 2.0 for Mozilla */

#cssmenu li {
    float:left;    /* this creates the side-by-side array of top-level buttons */
    position:relative;    /* create local positioning contexts for each button */
    margin:0;
    margin-right: 2em;
}

.drop {
    display:block;
    padding:0px 0.33em;           /* this sets the l/r margins for our menu item */
    margin:0;
    text-align:right;   /* this right alignment goes with the float:left below */
    cursor:pointer;      /* IE tries to switch back to an I-beam, don't let it */
    cursor:hand;           /* IE5 only knows about "hand", so set it both ways */
}

.drop span {        /* this simultaneously left and right aligns the text and */
    float:left;       /* the >> in the drop-down menus which link to sub-menus */
}

.rightmenu {
    position:relative;  /* establish a local positioning context for YAH label */
    float:right;                  /* and right-align it at the top of our page */
}

/*======================== TOP LEVEL MENU DEFINITIONS ========================*/

#cssmenu ul li ul {
    display:none;                  /* initially hide the entire list hierarchy */
    padding:1px;                               /* this is our box border width */
}

#cssmenu ul li a,
#cssmenu ul li a:visited {                    /* unselected top-level menu items */
    display:block;
    float:left;
    text-decoration:none;
    height:24px;
}

/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/

#cssmenu ul li:hover ul,
#cssmenu ul li a:hover ul {                           /* 2nd level drop-down box */
    display:block;
    position:absolute;
    margin:0;
    top:24px;              /* place us just up underneath the top-level images */
    left:-1px;       /* left-align our drop-down to the previous button border */
    height:auto;      /* the drop-down height will be determiend by line count */
    width:13.5em;
    color:black;                        /* this sets the unselected-text color */
    background:black;         /* this sets our menu's effective "border" color */
}

#cssmenu ul li:hover ul.leftbutton,
#cssmenu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
    left:0px;
}

#cssmenu ul li:hover ul.skinny,
#cssmenu ul li a:hover ul.skinny {             /* 2nd level skinny drop-down box */
    width:8.08333em;   /* with a 12px default font, this is 97px width (97/12) */
}

#cssmenu ul.rightmenu li:hover ul,
#cssmenu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
    left:auto;
    right:0;         /* nudge the right menu right to line up under the border */
    width:400px;      /* with a 12px default font, this is 228px width (228/12) */
}

* html #cssmenu ul.rightmenu li a:hover ul {         /* IE5/6 needs a tweak here */
    right:-1px;
}

#cssmenu ul li:hover ul li a,
#cssmenu ul li a:hover ul li a {                   /* 2nd level unselected items */
    border:0;
    margin:0;
    padding:0;
    height:auto;
    color:#000;               /* this sets the unselected drop-down text color */
    background:#d8d8d8;       /* this sets the drop-down menu background color */
    width:13.5em;
}

#cssmenu ul li:hover ul li:hover a,
#cssmenu ul li a:hover ul li a:hover {                /* 2nd level selected item */
    color:black;
    background:white;
}

#cssmenu ul li:hover ul.skinny li a,
#cssmenu ul li a:hover ul.skinny li a,
#cssmenu ul li:hover ul.skinny li a:hover,
#cssmenu ul li a:hover ul.skinny li a:hover {     /* 2nd level un+selected items */
    width:8.08333em;
}

/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/

#cssmenu ul li:hover ul li ul,
#cssmenu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
    visibility:hidden;
}

#cssmenu ul li:hover ul li:hover ul,
#cssmenu ul li a:hover ul li a:hover ul {             /* 3rd level drop-down box */
    visibility:visible;
    position:absolute;
    margin-top:-1px;          /* bring the top edge of the 3rd level menu up one */
    top:0;
    left:8.08333em;
    width:14em;
}

#cssmenu ul li:hover ul li:hover ul li a,
#cssmenu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
    width:14em;
    background:#d8d8d8;
}

#cssmenu ul li:hover ul li:hover ul li a:hover,
#cssmenu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
    width:14em;
    background:white;
}