Раз уж начали, то надо бы и закончить. Все только на html и css. А иначе не стоило и огород городить. Скрипт и прочие ингредиенты будут предложены чуть ниже. Сразу хочу огорчить, пользователей продуктов Мастера Lasto, в связи с особенностями движка блога, напрямую описанное работать не будет. По этому поводу с Мастером были консультации, решение есть, но из-за не контролируемого размножения клонов не стоит даже надеяться, к этому надо отнестись с должным пониманием, на массовое распространение данной фишки. В nano-CMS меню не проверялось, но вполне возможно, будет работать без лишних заморочек.

Код скрипта о котором шла речь в предыдущей публикации:

<attach for=element event=onmouseover handler=absolute> 
<attach for=element event=onmouseout handler=float>  
<script> 
function absolute(){element.className='hover';}  
function float(){element.className='';} 
</script>

Из скриншота из той же статьи видно, что при наведении курсора мыши, рядом ссылкой появляется треугольник. В общем случае, технология его создания проста и никаких особых познаний не требует. Скриншот.

В качестве html-кода подойдет любой блок или строчный элемент со стилевым правилом display:block; Остается, только каждому border-у присвоить свой цвет. Выбор, в какую сторону будет направлена вершина треугольника, определяется заданием одному border-у цвета на ваш вкус, а остальным цвет фона на котором этот треугольник будет появляться.

Стили для треугольника:

q {
  border-top:red 70px solid;
  border-right:blue 70px solid;
  border-bottom:000 70px solid;
  border-left:green 70px solid;
  display:block;
  margin:20px auto;
  overflow:hidden;
  height:1px;
  width:1px
}

Запись, определяющая цвет может и должна выглядеть так:

html треугольника:

Теперь стоит остановиться на html самого меню. Из-за того, что :hover будет у блока в котором расположены и ссылка и сам треугольник есть смысл использовать cписок определений. В этом случае отпадает необходимость, в каких либо классах, к примеру, для выделения заголовка к нашему меню. Хрестоматийно, в полном соответствии с семантикой для подобного рода случаев.

Соберем все воедино.

сss меню

.menu_absolute {border:#ddd 1px solid;margin:20px auto;width:200px;}
.menu_absolute a {color:#777;display:block;font:bold 12px georgia,helvetica,sans-serif;position:relative;text-decoration:none;}
.menu_absolute a:hover {color:#c60;}
.menu_absolute dl {font:bold 13px arial,georgia,helvetica,sans-serif;margin:0;padding:10px;}
.menu_absolute dt {color:#960;}
.menu_absolute dd {list-style-type:none;margin:0;padding:2px 0 0 10px;position:relative;}
.menu_absolute dd em {
  border-top:#fff 5px solid;
  border-right:#fff 5px solid;
  border-bottom:#fff 5px solid;
  border-left:#a00 5px solid;
  display:none;
  position:absolute;left:1px;top:4px;z-index:2;
  overflow:hidden;
  height:1px;
}
.menu_absolute dd:hover em {display:block;margin:0 0 0 -6px;}
*html .menu_absolute dd {behavior:url(hover.htc);}
*html .menu_absolute dd.hover em {display:block;margin:0 0 0 -6px;}
.menu_absolute span {color:#905;}

html меню

<div class="menu_absolute">
<dl>
  <dt>Навигация <span>(absolute)</span></dt>
  <dd><em></em><a href="#">Menu</a></dd>
  <dd><em></em><a href="#">Float</a></dd>
  <dd><em></em><a href="#">Left</a></dd>
  <dd><em></em><a href="#">For IE6</a></dd>
  <dd><em></em><a href="#">Script hover.htc</a></dd></dl>
</div>

На тест-странице два варианта меню. Во втором случае вместо абсолютного позиционирования используется float. При наведении курсора мыши на ссылку происходит ее смещение влево, а на освободившемся месте появляется треугольник. Тут нет никаких сложностей, все предельно просто. Пробуйте, экспериментируйте.