/**
 * Горизонтальное меню
 */

/****************
 * Обязательно. Желательно не изменять.
 */
ul.hmenu li{
  list-style-type:none;
  /* :NOTE: Если есть расстояние между элементами, менюшка не всегда
   * корректно отрабатывает. Не получилось отловить эту особенность,
   * посему блоки пусть немного находят друг на друга */
  margin: 0px -1px -1px 0px;
}
ul.hmenu li{
  position: relative;
  top: 5px;
  left: 0px;
}
ul.hmenu li ul  {
  position: absolute;
  padding: 0px;
}
ul.hmenu, ul.hmenu ul{
  margin: 0;
}
/* Все пункты меню должны быть блоками */
ul.hmenu li{ display: block; }
/* Все подменю изначально скрываем */
ul.hmenu ul{ display: none; }
/* Элементы, над которыми указатель мыши, показываем */
ul.hmenu li:hover>ul{ display: block; }
ul.hmenu ul.over { display: block; }
/* Если записать так, в IE не работает (скорее всего, потому, что встречает непонятную запись "li:hover>ul" и игнорирует все предложение):
ul.hmenu li:hover>ul, ul.hmenu ul.over { display: block; }
 */

/****************
 * Обязательно. Указываем размеры элементов .
 */
 /* Элементы верхнего уровня располагаем горизонтально */
ul.hmenu li  { float: left; }
ul.hmenu ul li  { clear: both; }
 /* Элемент второго уровня должен появляться снизу */
ul.hmenu ul  {
  left: -1px;
  _left: 0px;
  top: 19px;
  _top: 20px;
}
 /* А начиная с 3го уровня - справа */
ul.hmenu ul ul {
  left: 159px;
  top: -1px;
  _top: 0px;
}
 /* И просто для примера указываем что элементы верхнего уровня
  * отличаются размером от остальных  */
ul.hmenu li{
  width: 80px;
  height: 20px;
}
ul.hmenu ul, ul.hmenu ul li{
  width: 160px;
  height: 20px;
}

/****************
 * Это так. Для красоты.
 */
ul.hmenu a{
  padding: 3px;
  display: block;
  _display: inline;
  width: 100%;
}

ul.hmenu div{ /* Этот Див нужен только для стрелки справа */
  position: absolute;
  top: 5px;
  right: 0px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16pt;
  height: 11pt;
}
 /* Указываем что у элементов верхнего уровня стрелка вниз,
  * а у остальных - вправо */
ul.hmenu div{ background-image: url(arrdown.gif); }
ul.hmenu ul div{ background-image: url(arr.gif); }

/****************
 * Шрифт надписей и цвета.
 */
ul.hmenu{  }
ul.hmenu li{ background-color: #ffffff; border: 1pt solid #ffffff; }
ul.hmenu li{ _border: 1pt; }
ul.hmenu li a{ _background-color: #fffff0; _border: 1pt solid #ffffff; }
ul.hmenu *{ color: #ffffff;}
ul.hmenu a{ color: #0066cc; text-decoration: none }

ul.hmenu li:hover{ background-color: #0066cc}
ul.hmenu li:hover>a{ color:#ffffff;}
ul.hmenu a:hover{ _color:#ffffff; _background-color: #0066cc}

ul.hmenu, ul.hmenu * { font: normal 11px verdana; }