No replies
edhen's picture
Last seen: 11 years 31 weeks ago
Timezone: GMT+10.5
Joined: 2011-02-25
Posts: 1
Points: 2

Ok in short, I have decided to take my first attempt with a multi dimensional menu list....

(main items (horizontal) >> sub 1 items (vertical) >> sub 2 items (vertical) etc.)

atm after alot of manipulation i finally got to where i desired except for 1 thing...

/*Main layer*/
#top_menu a { color: #39F; }
#top_menu ul { list-style: none; }
#top_menu ul li { float: left; padding: 0px 10px 0px 10px; line-height: 52px; }
/*first sub layer*/
#top_menu ul li ul { display: none; }
#top_menu ul li:hover ul { position: absolute; z-index: 100; display: block; background: #000; opacity: 0.7; filter: alpha(opacity=70); }
#top_menu ul li:hover li { padding: 10px 30px 10px 10px; line-height: normal; clear: both; display: block; width: 100%; }
#top_menu ul li:hover li a { width: 100%; }
/*second sub layer*/
#top_menu ul li:hover li ul { display: none; }
#top_menu ul li:hover li:hover ul { position: absolute; display: inline; margin-left: 30px; margin-top: -10px; opacity: 1; filter: alpha(opacity=100); }
#top_menu ul li:hover li:hover li { white-space: nowrap; }

with that code, my second sub layer will not be next to the li element to the left... instead it will be referencing from the text inside the parent li element and use that for its position. obviously the longest text line it works as i had expected, its just the shorter words that causes the problems.. I referenced another persons CSS that achieved the result i was after EXCEPT they used fixed widths where i wish to leave use the text length instead.

any help or guidence will greatly be appreciated, thank you...