Please see the example at http://cssprovingground.com. The bottom one works fine because there is no element to be rendered in the middle of the element displayed on hover.
On Mon, Oct 6, 2008 at 9:50 AM, BobSharp <[EMAIL PROTECTED]> wrote: > I would checkout the source of CSS menus > because this sounds like the same arrangement. > > > > ----- Original Message ----- From: "Jack Blankenships" > <[EMAIL PROTECTED]> > To: <[email protected]> > Sent: Monday, October 06, 2008 4:19 PM > Subject: [css-d] CSS Select Box > > >> I am building a pseudo-"select" with css to allow for >> submenus/subselects, i.e. when an element with sub options is hovered, >> another set of options appears to the right. With the provided css >> and sample HTML below this functionality works just fine, however when >> I place this into rows of a table for a grid the pseudo-select not >> hovered appears above the popup for the hovered element. As you can >> see I tried the application of a z-index, but this did not seem to >> help. In any case what I am attempting to do is have the ul/li >> element I am hovering over always be above any similar elements. >> >> Any suggestions? >> >> CSS: >> >> ul.subselect { >> background: #FFFFFF url(text-bg.gif) repeat-x scroll 0 0; >> font-size: 1.1em; >> z-index: -10; >> } >> ul.subselect:hover { >> z-index: 10; >> } >> ul.subselect, .subselect ul { >> padding: 0; >> margin: 0; >> border: 1px solid silver; >> } >> ul.subselect li { >> list-style-type: none; >> position: relative; >> margin: 0; >> } >> ul.subselect > li { >> background: #FFFFFF url(pull_down.gif) no-repeat 98% 50%; >> padding: 4px; >> padding-right: 20px; >> } >> ul.subselect ul { >> display: none; >> background-color: #ffffff; >> } >> ul.subselect li:hover > ul { >> display: inline-block; >> position: absolute; >> top: -1px; >> left: 100%; >> } >> ul.subselect li:hover > ul > li { >> text-wrap: nowrap; >> white-space: nowrap; >> } >> ul.subselect li a, ul.subselect li.sub a { >> display: inline-block; >> padding: 3px; >> padding-right: 5px; >> text-decoration: none; >> font-weight: normal; >> color: black; >> } >> ul.subselect li:hover { >> background-color: #407ad8; >> } >> ul.subselect li.sub { >> background: url(black_triangle.gif) 98% 50% no-repeat; >> } >> ul.subselect li.sub:hover { >> background: #407ad8 url(black_triangle.gif) 98% 50% no-repeat; >> } >> ul.subselect > li:hover > ul { >> left: -1px; >> } >> >> HTML: >> >> <ul class="subselect"> >> <li>Select ... >> <ul> >> <li><a href="">Option 1</a></li> >> <li><a target="_blank" href="" title="">Option 2</a></li> >> <li class="sub"><a href="" title="">Option 3</a> >> <ul> >> <li><a href="" title="">Option 3 Sub 1</a></li> >> </ul> >> </li> >> <li class="sub"><a href="" title="">Option 4</a> >> <ul> >> <li><a href="" title="">Option 4 Sub 1</a></li> >> </ul> >> </li> >> <li><a href="" title="">Option 5</a></li> >> </ul> >> </li> >> </ul> >> ______________________________________________________________________ >> 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/ >> >> >> -- >> No virus found in this incoming message. >> Checked by AVG. >> Version: 7.5.526 / Virus Database: 270.7.6/1709 - Release Date: 10/5/2008 >> 09:20 >> >> > > > -- > I am using the free version of SPAMfighter for Personal use. > SPAMfighter has removed 88 of my spam emails to date. > Get the free SPAMfighter here: http://www.spamfighter.com/len > > The Trial and Professional version does not have this message in the email > > > ______________________________________________________________________ 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/
