/* The dropmenu area itself. Okay to position absolute inline. */
div.dropmenu {
    box-sizing: border-box;
    height: 3em; width: 26em;
    z-index: 25;
    position: relative;
}
div.dropmenu * { box-sizing: border-box; }

/* Boxes which hold each menu entry.  Each box holds the entire menu entry,
   both the label and menu contents, but is given the height of the label
   only.  The contents overflows, but (as specified), that is generally
   hidden. */
div.dropmenu div.menuentry {
    text-align: center;
    padding-top: 0.6em;

    width: 33.3%;
    height: 3em;
    position: absolute;
    overflow: hidden;
}

/* Put them next to each other. */
div.dropmenu div.menuentry:nth-child(2) { left: 33.3%; }
div.dropmenu div.menuentry:nth-child(3) { left: 66.7%; }

/* Position the content part of each menuentry outside their physical 
   dimensions, and move them back to the left, so the contents appear at the
   left edge of the menu area (div.dropmenu).  The math looks strange, but
   the menuentry (just above here) divs are moved rightward by some 
   multiple of 1/3 of the size of their container, div.dropmenu.  But they
   are also 1/3 as wide as div.dropmenu.  So when we move div.mencont left
   (just below here) by 100%, it is 100% of div.menuentry, which is 1/3 of
   div.dropmenu.  That's why it takes 100% left movement below to undo
   33.3% right movement above. */
div.dropmenu div.mencont {
    padding-top: 0.3em;
    position: absolute;
    top: 3em;
    height: 12em;
    width: 26em;
    background-color: rgb(90%,90%,95%);
}
div.dropmenu div.menuentry:nth-child(2) div.mencont { left: -100%; }
div.dropmenu div.menuentry:nth-child(3) div.mencont { left: -200%; }

/* When you hover over a menu entry (and the hidden part doesn't count),
   change the background color to show the selection of the entry, and
   make the hidden part, which is the menu contents, visible.
 */
div.dropmenu div.menuentry:hover {
    background-color: rgb(50%,75%,90%);
    overflow: visible;
}

/* Style the menu entry name text. */
div.dropmenu div.menuentry span {
    font-family: sans-serif;
    font-size: 110%;
}