как сделать свободное позиционирование выпадающего подменю?

[Kleg]

Подскажите, пожалуйста, как сделать в Joomla 1.5 в «CSS Menu» свободное позиционирование выпадающего подменю. Т.е. что бы подменю появлялось не под родительским элементом, а под первым (слева) элементом меню. Зачем это надо, см. тут: http://joomlaforum.ru/index.php/topic,132011.0.html

Код шаблона CSS Menu:

Код

<?php defined('_JEXEC') or die(); ?>
<div class="css_menu">
<ul>
<?php foreach ($items as $item) { ?>
<li><a href="<?php echo JRoute::_($item['link'] . '&Itemid=' . $item['id']); ?>"><?php echo $item['name']; ?></a>
<?php if (isset($item['items'])) { ?>
<div class="css_submenu">
<ul>
<?php foreach ($item['items'] as $subitem) { ?>
<li><a href="<?php echo JRoute::_($subitem['link'] . '&Itemid=' . $subitem['id']); ?>"><?php echo $subitem['name']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>

ЦСС:

Код

div.css_menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
div.css_menu ul li {
	float: left;
	margin: 0px;
	padding: 4px;
	border: 1px solid #ccc;
	background-color: #fff;
}
div.css_menu ul li a {
	display: block;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
}
div.css_menu ul li div.css_submenu {
	position: absolute;
	display: none;
}
div.css_menu ul li:hover div.css_submenu {
	display: block;
}
div.css_menu ul li div.css_submenu ul {
	list-style: none;
	position: relative;
	top: 5px;
	left: -5px;
	margin: 0px;
	padding: 4px;
	border: 1px solid #ccc;
	background-color: #fff;
}
div.css_menu ul li div.css_submenu ul li {
	float: left;
	margin: 4px 0px 0px 0px;
	padding: 0px;
	border: none;
}

[Kleg]

Как выровнять, понятно.

Код

<?php defined('_JEXEC') or die(); ?>
<div id="topnav">
<!--создаем меню-->
<ul>
<?php foreach ($items as $item) { ?>
<!--создаем каждый пункт меню вместе с его подменю-->
<li><a href="<?php echo JRoute::_($item['link'] . '&Itemid=' . $item['id']); ?>"><?php echo $item['name']; ?></a>
<?php if (isset($item['items'])) { ?>
<!--создаем подменю-->
<span>
<ul>
<?php foreach ($item['items'] as $subitem) { ?>
<li><a href="<?php echo JRoute::_($subitem['link'] . '&Itemid=' . $subitem['id']); ?>"><?php echo $subitem['name']; ?></a></li>
<?php } ?>
</ul>
 </span>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>

Код

#topnav ul {
	margin: 0; padding: 0;
	float: left;
	list-style: none;
	position: relative; /*--Установить относительное позиционирование на неупорядоченный список - не на элемент списка--*/
}
#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555; /*--Разделитель для каждого базового уровня ссылки--*/
}
#topnav li a {
	padding: 10px 15px;
	display: block;
	text-decoration: none;
}
#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none; /*--Показывать по умолчанию--*/
	color: #fff;
}
#topnav li:hover span { display: block; } /*--Показать подменю при наведении--*/
#topnav li span a { display: inline; } /*--Возвращаем в исходное состояние--*/
#topnav li span a:hover {text-decoration: underline;}

Теперь, хотелось бы понять, как выровнять и меню и подменю по центру родительского элемента (div). Т.е., что бы было так

                 меню
       выпадающее подменю