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