userapps/broadcom/cfm/html/usr_menus.css

   1 /* --------------------------------------------------------------------------
   2
   3         (c) 2005 U.S. Robotics Corporation.
   4
   5         -------------------------------------------------------------------------- */
   6
   7 /* ------------------------------------------------------------------------
   8
   9         Vertical dropdown menus:
  10         http://www.htmldog.com/articles/suckerfish/dropdowns/
  11
  12
  13         More resources:
  14         http://www.alistapart.com/articles/horizdropdowns/
  15
  16         http://www.alistapart.com/articles/dropdowns/
  17         http://www.htmldog.com/articles/suckerfish/example/
  18
  19         Fix for bug where IE always displays <select>s as top layer:
  20         http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/Select-tag-overlap-in-IE?opendocument&comments
  21         http://www.milonic.com/menusample24.php
  22         http://69.236.149.4/test/fixed/default.asp
  23         (slow) http://www.yxscripts.com/menuG5/
  24         (x) http://www.aplus.co.yu/adxmenu/four-variants-of-drop-down-menu/
  25
  26 ------------------------------------------------------------------------ */
  27
  28 /*
  29
  30         M E C H A N I C S
  31
  32         These classes provide the barebones mechanisms for hiding the first-level
  33         submenus and displaying them when the cursor hovers over the menu bar.
  34         This code requires any tags following the menu bar to be enclosed in
  35         a DIV with the id of "idContent."
  36 */
  37
  38 DIV#idContent
  39 {
  40         clear:  left;   /* required because we're floating menus */
  41 }
  42
  43 /*
  44         get rid of list decorations
  45 */
  46 UL#idMenu, UL#idMenu UL
  47 {
  48         padding:                0;
  49         margin:         0;
  50         list-style:     none;
  51 }
  52
  53 /*
  54         put top-level items next to each other in a bar
  55 */
  56 UL#idMenu LI
  57 {
  58         float:  left;
  59 }
  60
  61 /*
  62         "Lock" width of menu elements (menu bar: LABEL, menu item: A)
  63
  64         LI's width is required for Opera.
  65         LI UL's width is required for Firefox.
  66                 (But it's set below so we delete "UL#idMenu LI UL" from here.)
  67         This seems unnecessary for UL#idMenu LABEL and UL#idMenu A--at least on IE.
  68                 (But it's set below so we delete "UL#idMenu A" from here.)
  69 */
  70 UL#idMenu LI, UL#idMenu LABEL
  71 {
  72         width:  7em;    /* this is overridden in the MenuBar ctor */
  73 }
  74
  75
  76 UL#idMenu LABEL, UL#idMenu A
  77 {
  78         display:        block;
  79 }
  80
  81 /*
  82         hide submenu items (second-level lists)
  83 */
  84 UL#idMenu LI UL
  85 {
  86         position:       absolute;
  87         left:                   -999em; /* don't use display:none because it breaks screen readers */
  88 }
  89 /*
  90         Display dropdown menu when menu bar item is hovered over.
  91         (Include class used by IE workaround.)
  92 */
  93 UL#idMenu LI:hover UL, UL#idMenu LI.clsIEhover UL
  94 {
  95         left:   auto;
  96 }
  97
  98
  99 /*
 100
 101         P R E T T Y   F O R M A T T I N G
 102
 103         These classes provide the formatting for 3D menus.
 104
 105 */
 106
 107 /*
 108         Override width of the dropdown menu and its contents so
 109         that the menu's wide enough for the widest (bold) item.
 110
 111         "UL#idMenu LI UL" and "UL#idMenu A" are required for the
 112 */
 113 UL#idMenu LI UL, UL#idMenu LI UL LI, UL#idMenu LI UL LI A
 114 {
 115         width:  10em;           /* this is overridden in the MenuDropdown ctor */
 116 }
 117
 118 /*
 119         menu bar items and menu dropdown items
 120
 121         3D effect for menu bar and dropdown items
 122 */
 123 UL#idMenu LI LABEL, UL#idMenu LI UL LI A
 124 {
 125         padding:                                3px 5px;
 126         border-top:                     1px solid #F0F0F0;
 127         border-left:            1px solid #F0F0F0;
 128         border-right:           1px solid #A0A0A0;
 129         border-bottom:          1px solid #A0A0A0;
 130
 131         white-space:            nowrap;
 132 }
 133
 134
 135 /*
 136         menu bar only
 137 */
 138 UL#idMenu LI LABEL
 139 {
 140         text-align:                     center;
 141         background-color:       #E0E0E0;
 142 }
 143
 144
 145 /*
 146         dropdown menu items
 147 */
 148 UL#idMenu LI UL LI A
 149 {
 150         text-decoration:        none;
 151         color:                          black;
 152         background-color:       #D0D0D0;
 153 }
 154 UL#idMenu LI UL LI A:hover
 155 {
 156         border:                         1px solid #646464;
 157         color:                          white;
 158         background-color:       #646464;
 159         font-weight:            bold;
 160 }