Apparently the problem was the application of the z-index property to the ul element rather than the li element.
On Mon, Oct 6, 2008 at 10:17 AM, Jack Blankenships <[EMAIL PROTECTED]> wrote: > 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/
