css/menuv3.css

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