css/menuv3.css

   1 body {\r
   2 behavior:url("css/csshover.htc");\r
   3 }\r
   4 \r
   5 #menu {\r
   6 width:100%;\r
   7 float:left;\r
   8 background:url(../image/bg_css_menu.png) repeat bottom;\r
   9 border:1px solid;\r
  10 border-color:#ccc #888 #555 #bbb;\r
  11 }\r
  12 \r
  13 #menu a, #menu h2, #menu div.x {\r
  14 font:11px/16px arial,helvetica,sans-serif;\r
  15 display:block;\r
  16 border:0;\r
  17 border-right:1px;\r
  18 border-style:solid;\r
  19 border-color:#ccc #888 #555 #bbb;\r
  20 white-space:nowrap;\r
  21 margin:0;\r
  22 padding:1px 0 1px 3px;\r
  23 }\r
  24 \r
  25 #menu h2 {\r
  26 color:#fff;\r
  27 padding:0 5px;\r
  28 }\r
  29 \r
  30 #menu a, #menu a:visited, #menu div.x, #menu div.x:visited {\r
  31 color:#000;\r
  32 text-decoration:none;\r
  33 padding-right:10px;\r
  34 }\r
  35 \r
  36 #menu a {\r
  37 background:#eee;\r
  38 }\r
  39 \r
  40 #menu div.x, #menu div.x:visited {\r
  41 background:#eee url(../image/right.gif) no-repeat right;\r
  42 }\r
  43 \r
  44 #menu a:hover, #menu div.x:hover {\r
  45 color:#a00;\r
  46 background-color:#ddd;\r
  47 }\r
  48 \r
  49 #menu a:active, #menu div.x:active {\r
  50 color:#060;\r
  51 background-color:#ccc;\r
  52 }\r
  53 \r
  54 #menu ul {\r
  55 list-style:none;\r
  56 margin:0;\r
  57 padding:0;\r
  58 float:left;\r
  59 min-width:7em;\r
  60 }\r
  61 \r
  62 #menu li {\r
  63 position:relative;\r
  64 float:none;\r
  65 border:0;\r
  66 }\r
  67 \r
  68 /* IE6 spacing bug fix, <li>s without a bottom border get spaced to far \r
  69  * correction: the bug will change the height of the parent element! this will also cause the whole menu to grow \r
  70  * so the only method to get this pile of crap going is to add a bottom border to the <li>s, where the enclosing <ul> already has\r
  71  * a bottom border, which just looks ugly\r
  72  * the trick: color the bottom border with the same color as the bottom pixel of the background image - noone notices */\r
  73 #menu ul li {\r
  74 border:solid;\r
  75 border-color:#ccd5e5;\r
  76 border-width:0 0 1px 0;\r
  77 }\r
  78 \r
  79 #menu ul ul li {\r
  80 border:solid;\r
  81 border-width:0 0 1px 0;\r
  82 }\r
  83 \r
  84 /* IE6 event bug fix, without a background there hovers will be occassionally lost between the li's to the layer below \r
  85  * causing the menu to close. Opera 9 has the same bug btw. */\r
  86 #menu ul ul {\r
  87 position:absolute;\r
  88 z-index:500;\r
  89 top:auto;\r
  90 display:none;\r
  91 background:#000;\r
  92 }\r
  93 \r
  94 #menu ul ul ul {\r
  95 top:0;\r
  96 left:100%;\r
  97 background:#000;\r
  98 }\r
  99 \r
 100 /* Begin non-anchor hover selectors */\r
 101 \r
 102 /* Enter the more specific element (div) selector\r
 103 on non-anchor hovers for IE5.x to comply with the\r
 104 older version of csshover.htc - V1.21.041022. It\r
 105 improves IE's performance speed to use the older\r
 106 file and this method */\r
 107 \r
 108 div#menu h2:hover {\r
 109 background:#A3C5FF;\r
 110 color:#a00;\r
 111 }\r
 112 \r
 113 div#menu li:hover {\r
 114 cursor:pointer;\r
 115 z-index:100;\r
 116 }\r
 117 \r
 118 div#menu li:hover ul ul,\r
 119 div#menu li li:hover ul ul,\r
 120 div#menu li li li:hover ul ul,\r
 121 div#menu li li li li:hover ul ul\r
 122 {display:none;}\r
 123 \r
 124 div#menu li:hover ul,\r
 125 div#menu li li:hover ul,\r
 126 div#menu li li li:hover ul,\r
 127 div#menu li li li li:hover ul\r
 128 {display:block;}\r
 129 \r
 130 /* End of non-anchor hover selectors */\r
 131 \r