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/
