i have a horizontal ul menu and am trying to get the child ul, that is also horizontal, to be part of flow (thus pushing elements down when it expands)
it seems this is not possible because it will either push the parent li to be wider, and if i make it absolute it is not part of the flow anymore.
one hack i came up with is to make an intermediary child li that is relative and then in effect the main child ul becomes a third level ul.
could there be a better solution? i have posted a lengthy description to stackoverflow and my hack idea on jsfiddle. i hope its ok to just post the links like that...(im new to this forum).
thanks!
I'd do something like this:
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>test doc</title> <style type="text/css"> ul { display: table; padding: 0; } li { display: inline-block; white-space: nowrap; width: 13em; } li li { display: none; width: auto; } li:hover li { display: inline-block; } </style> </head> <body> <p>dfhg</p> <ul> <li>Hover here for sub-menu <ul> <li><a href="#">daylight</a></li> <li><a href="#">solutions</a></li> <li><a href="#">design</a></li> <li><a href="#">something</a></li> <li><a href="#team">team</a></li> </ul> </li> <li>Yet another sub-menu <ul> <li><a href="#">daylight</a></li> <li><a href="#">solutions</a></li> <li><a href="#">design</a></li> <li><a href="#">something</a></li> <li><a href="#team">team</a></li> </ul> </li> </ul> <p>Hello text</p> </body> </html>
cheers,
gary
thanks, thats really great,
thanks, thats really great, although i just dont know if i can have a set width on the main li. i guess thats the only way though!
thanks again!
Inline block
Elements displayed as inline-block shrink-wrap their contents by default. If a nested child element is wider than its parent, it will make the parent wider. The explicit width serves as a min-width so that its element and descendent elements fit without causing movement in the top list.
I hope that's clear. As I read it back, I'm not sure I understand what I said.
cheers,
gary