gregst, привет!
На самом деле, ты немного заблудился.
Все крутые сообщники при построении многоуровневых выпадающих меню только на CSS пользуют WayFinder и
http://CssPlay.co.uk 
Главное -- натянуть идеи с cssplay на wayfinder, чтобы wayfinder ковырять не пришлось. На cssplay много меню, поизучай на досуге. Под твой случай, вроде как, подходит такое меню
http://www.cssplay.co.uk/menus/drop_fly.html Достаточно глянуть html-код, стиль для менюшки прописан в хедере.
<style type="text/css">
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
#pmenu {margin:25px 0 200px 15px;}
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a{background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu > li:hover > ul {left:0; top:24px;}
</style>
Вот html-код менюшки:
<ul id="pmenu">
<li><a href="#nogo">Top Level 1</a></li>
<li><a href="#nogo">Top Level 2</a></li>
<li><a href="#nogo">Top Level 3 »</a>
<ul>
<li><a href="#nogo">Sub Level 1a</a></li>
<li><a href="#nogo">Sub Level 1b</a></li>
<li><a href="#nogo">Sub Level 1c »</a>
<ul>
<li><a href="#nogo">Sub Level 2a</a></li>
<li><a href="#nogo">Sub Level 2b »</a>
<ul>
<li><a href="#nogo">Sub Level 3a</a></li>
<li><a href="#nogo">Sub Level 3b »</a>
<ul>
<li><a href="#nogo">Sub Level 4a</a></li>
<li><a href="#nogo">Sub Level 4b</a></li>
<li><a href="#nogo">Sub Level 4c »</a>
<ul>
<li><a href="#nogo">Sub Level 5a</a></li>
<li><a href="#nogo">Sub Level 5b</a></li>
<li><a href="#nogo">Sub Level 5c</a></li>
<li><a href="#nogo">Sub Level 5d »</a>
<ul>
<li><a href="#nogo">Sub Level 6a</a></li>
<li><a href="#nogo">Sub Level 6b</a></li>
<li><a href="#nogo">Sub Level 6c</a></li>
<li><a href="#nogo">Sub Level 6d</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 5e</a></li>
<li><a href="#nogo">Sub Level 5f</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 4d</a></li>
<li><a href="#nogo">Sub Level 4e</a></li>
<li><a href="#nogo">Sub Level 4f</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 3c</a></li>
<li><a href="#nogo">Sub Level 3d</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 2c</a></li>
</ul>
</li>
<li><a href="#nogo">Sub Level 1d</a></li>
<li><a href="#nogo">Sub Level 1e</a></li>
</ul>
</li>
<li><a href="#nogo">Top Level 4</a></li>
<li><a href="#nogo">Top Level 5</a></li>
<li><a href="#nogo">Top Level 6</a></li>
</ul>
Не углубляясь в FAQ по wayfinder’у...
1. Вот такая хрень » для элементов с детьми реализуется с использованием wrapper’ов (см. документацию, конфиговый файл и чанки). В твоём случае и wrapper не нужен, всё это реализуется через CSS и картинку. Wrapper понадобится, если ты захочешь стрелочку сделать не gif’овой картинкой.
Лирическое отступление:
http://www.cssplay.co.uk/menus/menusix.html ребята вот такие вещи делают без картинок
, и разработчики wayfinder’а знают об этом!
2. Если хочешь обойтись без скриптов, в настройках у wayfinder’a активный элемент с детьми должен быть гиперссылкой.
3. Я не люблю, когда страница ссылается сама на себя, и скрипты тоже не люблю, но всё ж. Если обходится без гиперссылок в активных элементах с детьми, для ИЕ нужен-таки скриптик для hoover. На серваке он уже есть. Как оформить css и подключить скриптик, поймёшь, если изучишь главное меню на
http://modx.ru
Не могу судить о том, как ты шаришь в css и на каком этапе освоение modx, но если возникнут ещё вопросы, попытайся их сгруппировать, то есть отделить вопросы по css от вопросов по настройке wayfinder’а. Так проще будет сообщникам помочь тебе.
Удачи
