Need help for Navigation Menu

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.