Hi
I'm creating a HTML/CSS menu based on several principles.
What I want:
- 2 Hierarchies, Menu & Submenu
- Menu & Submenu are <ul> lists, displayed inline, submenu is nested <ul>
- Menu is centered
- Active menu option is selected through the <body id="..:"> tag
- Can't use float: left, because my background images are overlapping (active background 131px wide, all other are 112px wide),
so I use absolute positioning of all <li> elements of the main menu
Problem:
I can't use the method described in the article <!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic2/horizontal02.htm">http://css.maxdesign.com.au/listamatic2 ... ntal02.htm</a><!-- m --> to get the submenu also
"display: inline;" and exactly below the menu, all items of the submenu are on top of each other
see my menu in development:
<!-- m --><a class="postlink" href="http://www.nei.ch/test/cssmenu.submenu.html">http://www.nei.ch/test/cssmenu.submenu.html</a><!-- m -->
a version without submenu, but working:
<!-- m --><a class="postlink" href="http://www.nei.ch/test/cssmenu.html">http://www.nei.ch/test/cssmenu.html</a><!-- m -->
the submenu should be below the main menu as you can see on this page:
<!-- m --><a class="postlink" href="http://www.nei.ch/">http://www.nei.ch/</a><!-- m -->
(current version of the menu, all working but nexted <ul> )
Do you know how to get this to work?
Thanks in advance!
Andy StaudacherJust a thought, might not work the way you'd like ....
How about a div, positioned where you want the submenu, to the correct width, but with no height specified. then you put in the links in the unordered list.
You've prolly done this and it doesn't work the way you wanted...
just a thought
Vincethx ecniv for your answer, but i want a semantically correct menu.
so the submenu has to be a nested list and not a second list in a second div.
the goal is something like this:
<ul>
<li>menu item 1
<ul>
<li>submenu item 1.1</li>
<li>submenu item 1.2</li>
</ul></li>
<li>menu item 2</li>
</ul>
as i said, all is working but the nested submenu. i can't fix the css to align it exactly where i want, the submenu items are not inline and they are all positioned on each other - pretty ugly.
still looking for a solution...
thanks - andy
I'm creating a HTML/CSS menu based on several principles.
What I want:
- 2 Hierarchies, Menu & Submenu
- Menu & Submenu are <ul> lists, displayed inline, submenu is nested <ul>
- Menu is centered
- Active menu option is selected through the <body id="..:"> tag
- Can't use float: left, because my background images are overlapping (active background 131px wide, all other are 112px wide),
so I use absolute positioning of all <li> elements of the main menu
Problem:
I can't use the method described in the article <!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic2/horizontal02.htm">http://css.maxdesign.com.au/listamatic2 ... ntal02.htm</a><!-- m --> to get the submenu also
"display: inline;" and exactly below the menu, all items of the submenu are on top of each other
see my menu in development:
<!-- m --><a class="postlink" href="http://www.nei.ch/test/cssmenu.submenu.html">http://www.nei.ch/test/cssmenu.submenu.html</a><!-- m -->
a version without submenu, but working:
<!-- m --><a class="postlink" href="http://www.nei.ch/test/cssmenu.html">http://www.nei.ch/test/cssmenu.html</a><!-- m -->
the submenu should be below the main menu as you can see on this page:
<!-- m --><a class="postlink" href="http://www.nei.ch/">http://www.nei.ch/</a><!-- m -->
(current version of the menu, all working but nexted <ul> )
Do you know how to get this to work?
Thanks in advance!
Andy StaudacherJust a thought, might not work the way you'd like ....
How about a div, positioned where you want the submenu, to the correct width, but with no height specified. then you put in the links in the unordered list.
You've prolly done this and it doesn't work the way you wanted...
just a thoughtVincethx ecniv for your answer, but i want a semantically correct menu.
so the submenu has to be a nested list and not a second list in a second div.
the goal is something like this:
<ul>
<li>menu item 1
<ul>
<li>submenu item 1.1</li>
<li>submenu item 1.2</li>
</ul></li>
<li>menu item 2</li>
</ul>
as i said, all is working but the nested submenu. i can't fix the css to align it exactly where i want, the submenu items are not inline and they are all positioned on each other - pretty ugly.
still looking for a solution...
thanks - andy