I wish to create a menu system that shows all of the sub menus when you roll over the top level. I have attached a PDF showing the menu structure.
I want to use a list, something like this:
<nav> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 1</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Sub 3.1</a> <ul> <li><a href="#">Sub 3.1.1</a></li> </ul> <li><a href="#">Sub 3.2</a> <ul> <li><a href="#">Sub 3.2.1</a></li> </ul> <li><a href="#">Sub 3.3</a> <ul> <li><a href="#">Sub 3.3.1</a></li> <li><a href="#">Sub 3.3.2</a></li> <li><a href="#">Sub 3.3.3</a></li> <li><a href="#">Sub 3.3.4</a></li> </ul> <li><a href="#">Sub 3.4</a> <ul> <li><a href="#">Sub 3.4.1</a></li> <li><a href="#">Sub 3.4.2</a></li> </ul> <li><a href="#">Sub 3.4</a> <ul> <li><a href="#">Sub 3.5.1</a></li> <li><a href="#">Sub 3.5.2</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> <li><a href="#">Item 7</a></li> </ul> </nav>
I am struggling on three fronts:
I cannot get the menu system to show all of the sub menus when you hover over the top level. Also I cannot get the change of direction in the menu structure to work.
I need for the first submenu to drop vertically and then the second submenu to build horizontally.
Also I need the mouse to bridge the gaps between the menus without activating mouse out!
Not many problems!
I am an absolute beginner and have created working drop down menus, but I've set myself a difficult task, so any help would be appreciated.
Attachment | Size |
---|---|
Menu_Structure.pdf | 28.12 KB |
Hi sblatch, We need to see
Hi sblatch,
We need to see the styles you have now to really help, a link to an example would be great.
Have you looked at this Multi level menu it might help you get started.