I'm lost. I've read the tutorials, screencasts and even forum posts which deal with navigation menus but I just don't get it. Dealing at the same time with style sheets, templates, modules and layouts is too much for me. :cry:

I'm trying to get a nice horizontal menu found in websites like these:

http://www.atlantainfertility.com/
http://www.br.uipr.edu/inter/index.php/inicio.html

I have even found a website that makes it easy showing the CSS and HTML code necessary to do the trick
http://css.maxdesign.com.au/listamatic2 ... ntal04.htm
but I just don't get it working wth this system either.

What I have done for now is:

1. Created module "navigation - dropdown". Module type "Navigation menu" and navigation template "nav_default" selected.

2. Imported style sheets listmenu_h; listmenu_v; listmenu_o and listmenu_fallback.

3. Included the stylesheets and modules in the "main" layout page.

4. Added following code in "Additional <head> tags:
Code:
<link rel="stylesheet" type="text/css" id="listmenu-h"  href="tl_files/scripts/fsmenu/listmenu_h.css" title="Horizontal 'Earth'" />
<script type="text/javascript" src="tl_files/scripts/fsmenu/fsmenu.js"></script>
<script type="text/javascript" src="tl_files/scripts/fsmenu/fsmenu_data.js"></script>
5. Site structure is created with content and pages in levels below.

6. Created in the Templates area a new "nav_default.tpl" and put the following code:
Code:
<?php if ($this->level=="level_1"): ?>
<?php if ($this->type == 'mod_navigation'): ?>
<ul class="menulist" id="listMenuRoot">
<?php else: ?>
<ul class="menulist" id="listMenuRoot">
<?php endif;?>
<?php else: ?>
<ul class="<?php echo $this->level; ?>">
<?php endif;?>
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; endif; ?>">"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?><?php echo $item['subitems']; ?>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?> onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link']; ?><?php echo $item['subitems']; ?>
<?php endif; endforeach; ?>[/list]
The menu appears with a plain formatting of small rectangular boxes with light orange background colour. When the mouse hovers on top it changes colour to brown. The letters keep the same size and I don't see any submenus at all.
Another problem is that the menu isn't completely horizontal. The first 2 items are beside each other, then the 3rd and 4th beneath also side to side and the fifth and last item on the 3rd row. :shock:

Please help me here.