How to create a horizontal main navigation menu?

Hello,

I have played with the example website coming with the program. Now I am able to change everything execept one: I was not been able to set the main navigation menu in the horizontal direction. Perhaps this must be done tuning the template or the css but I do not know where to put the hands. Can I get some suggestion to perform this task?

MAny thanks in advance,
Luigi

Hi Luigi,

just set for the li element this declaration:

Code:

---

.mod_navigation li
{
float:left;
}

---

So if you want to use the menu in header section you can specify this by css:

Code:

---

#header .mod_navigation
{
..
}

---

Quote:

---

Originally Posted by planepix

Hi Luigi,

just set for the li element this declaration:

Code:

---

.mod_navigation li
{
float:left;
}

---

---

So simple? :o
It worked OK (Just I had to give a wider width to look a little better but I got the idea).
So it is matter of CSS. Here I found an interesting article to add a dropdown menu to the horizontal menu
http://www.alistapart.com/articles/dropdowns/

Thank you,
Luigi

yes css is strong :)

yes play with padding for the li element to get more space between each menu items.

dropdown menus are mostly working in modern browsers, not in IE6 where you need to help with javascript.

In the wiki there is also an tutorial to set up a "son of a suckerfish" dropdown menu in TYPOlight.