<snip>
> I want the submenu items to show up on hover on "Target" underneath this menu
> bar. Like this:
>
> [Home] [About] [This] [That] [Target]
> [Sub1] [Sub2] [Sub3] [Sub4] [Sub5]
>
> But all I can get to happen is the submenu lining up with "Target", that is,
> it is not left aligned with "Home".
>
I'm going to guess that you've tried setting the submenu UL like this:
ul ul{position: absolute; left: 0;}
This is the right thing to do to get what you're after, but the trick
is knowing what that "0" is relative to. "left: 0;" can mean a few
different things. Right out of the gate, it usually means the left
edge of the browser window. Since you are seeing your menu align the
the left of the "TARGET" <li> I'm going to guess that you have some
kind of position set on that <li> as well. Something like this
ul li{position: relative;}
If you do, then, that <ul> you're trying to move to the left edge of
your menu will instead go to the left edge of the "TARGET" <li>. This
is because that UL you want to move starts crawling up the HTML, finds
it's first parent container that has any position set on it and says
"yeah, here. Here is where I will make my stand." If you delete
whatever position styles you may have on </li>TARGET</li> and add
"position: relative;" to the main UL of your menu, you may be in luck.
Something like this perhaps:
<style>
ul {position: relative;}/*position the parent UL so that the child UL
uses it to calculate where left: 0 is*/
li {float: left;}/*get your menu items to display horizontally*/
ul ul {position: absolute; left: 0; display: none;} /*set position and hide it*/
ul li:hover ul {display: block;}/*show it (won't work in IE7 and lower)*/
</style>
This is incredibly rudimentary CSS and you'll have some work to do to
get things to look right, containers to contain they children
correctly (good luck with that: absolutely positioned elements are
going to make you their b**ch ;) ), width and heights will be a "to
do" as well.
Check out my (very rough) demo: http://fiercefamily.com/demo/menuhovers.html
Tim
--
[email protected]
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
