Wed, 2010-03-10 12:36
Hi All,
I am facing some problem in my application where 1 Select Drop Down overlapping the upper menu drop down. I tried z-index for css menu but not done. please help me to resolve this issue.
Looking for quick reply.
Thanks in Advanced.
Sarang
Wed, 2010-03-10 12:57
#1
You might want to look at
You might want to look at http://users.tpg.com.au/j_birch/plugins/superfish/ which I believe has a built-in fix for dropdowns that fall over select elements.
Thu, 2010-03-11 06:08
#2
Hi, Please check my html and
Hi,
Please check my html and css for this problem, first you click on select list box and then remain it open and go to menu Main Links, on hover dorp down will appear behind the select box drop down.
Please reply asap.
Here is html
--------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Home</title> <style type="text/css"> .topnavbar{ background:#a9b3bd; width:100%; font-size:11px; } #nav {padding:0; margin:0; list-style:none; height:34px; position:relative; z-index:999998; font-family:Tahoma,arial, verdana, sans-serif;} #nav li {float:left; margin-right:1px; background:url(../images/topnavbg.gif) repeat-x } #nav li a {display:block; float:left; height:34px; line-height:35px; background:url(../images/topnavbg.gif) repeat-x; color:#00254a; text-decoration:none; font-size:1.2em; font-weight:normal; padding:0 19.25px 0 19.3px;} #nav li a:hover {display:block; float:left; height:34px; line-height:35px; background:url(../images/topnavbg-hover.gif) repeat-x; color:#00254a; text-decoration:none; font-size:1.2em; font-weight:normal; padding:0 19.25px 0 19.3px;} #nav table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */ #nav li a:hover {z-index:200; position:relative;color:#00254a; background:url(../images/topnavbg-hover.gif) repeat-x;} #nav li:hover {position:relative; z-index:200;} #nav li:link > a.sub {color:#00254a; background:url(../images/topnavbg.gif) repeat-x;} #nav li:hover > a {color:#00254a; background:url(../images/topnavbg.gif) repeat-x;} #nav li.current a {color:#00254a; background:url(../images/topnavbg-hover.gif) repeat-x;} #nav li a.sub {background: url(../images/arrow.gif) no-repeat 96px center ;} #nav li.current a.sub {color:#00254a; background: url(../images/arrow.gif) no-repeat center top ;} #nav :hover ul {left:0; top:33px; width:120px; background:#ccc;} /* keep the 'next' level invisible by placing it off screen. */ #nav ul, #nav :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav :hover ul :hover ul {left:120px; top:-1px; background:#ccc; white-space:nowrap; width:100px; z-index:200; height:auto;} #nav :hover ul li {margin:0; border-top:1px solid #b4bac0;} #nav :hover ul li a {width:110px; padding:0; text-indent:10px; background:#ccc; color:#000; height:30px; line-height:30px;} #nav :hover ul :hover {background-color:#ccc; color:#000;} </style> </head> <body> <div class="wrapper"> <!--Login Header--> <div class="topnavbar" style="z-index:999999"> <ul id="nav"> <li class="current"><a href="#" title="Home">Home</a></li> <li ><a href="#" class="sub">Main Links <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="#url">Dropdown one <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Dropdown three</a></li> <li><a href="#url">Dropdown four</a></li> <li><a href="#url">Dropdown five <!--[if gte IE 7]><!--> </a> <!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> <div> <select name="" class="select-box"> <option>xyz</option> <option>222222233</option> <option>WWWWWdddddd</option> <option>sadsd</option> <option>ssds</option> </select> </div> </div> </body> </html>
Thanks,
Sarang
Thu, 2010-03-11 06:15
#3
Tyssen wrote: You might want
You might want to look at http://users.tpg.com.au/j_birch/plugins/superfish/ which I believe has a built-in fix for dropdowns that fall over select elements.
Agreed! I love Superfish! Although, it's not built in, it's an additional plugin called "bgIframe"
Thu, 2010-03-11 09:11
#4
Shouldn't request people
Shouldn't request people reply ASAP, people giving their free time and experience will reply in their own good time, which on this forum is usually pretty fast 
Why would one open the select then hover the menu, two actions don't go together, although obviously it would be nicer if that didn't happen.
Thu, 2010-03-11 12:32
#5
Thanks for advise.
Thanks for advise.