Member Avatar for designershiv

Menu sub links overlapping when select box opens , how to fix this

Check this below link for reference

http://i.stack.imgur.com/lCCWO.gif

  • 4 Contributors
  • 8 Replies
  • 3K Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by Sujay808

Recommended Answers

All 8 Replies

Member Avatar for JorgeM

you should be able to use the "z-index" property to layer them in the order as you see fit.

Member Avatar for designershiv

Hey Jordem,
thanks for your reply, I already tried that but its not working

Member Avatar for JorgeM

Ok, you'll have to provide a link to your site or post the relevant HTML, CSS, and/or javascript code. Or post it on jsfiddle

Member Avatar for designershiv

Hey JorgeM,
thanks again, Please check the sample code, give me your feedback.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style type="text/css">
* {
    margin:0px;
    padding:0px;
}
.wrap{ width:500px; margin:0 auto;}
ul.nav { float:left; }
ul.nav li { float:left; padding:0px 10px;  border-right:1px solid #ccc; position:reltaive; list-style-type:none;}
ul.nav li ul { position:absolute; left:-999px; }
ul.nav li:hover ul { left:auto; position:absolute; }
ul.nav ul li { width:150px; float:none;  border:0px; background:#999; }
ul.nav ul li a { color:#fff; text-decoration:none;}
.selectBox { margin-left:100px; margin-top:10px;}
</style>
</head>

<body>
<div class="wrap"><ul class="nav">
<li><a href="#">navigation</a></li>
<li><a href="#">navigation</a>
<ul>
<li><a href="#">sub navigation</a></li>
<li><a href="#">sub navigation</a></li>
<li><a href="#">sub navigation</a></li>
<li><a href="#">sub navigation</a></li>
</ul>
</li>
<li><a href="#">navigation</a></li>
</ul>
<br>
<div class="selectBox">
    <select>
    <option>value</option>
    <option>value</option>
    <option>value</option>
    <option>value</option>
    </select>
</div></div>
</body>
</html>
Member Avatar for JorgeM

Interesting challenge. It appears that the option elements are not affected by z-index. There's quite a bit of chatter on the various forums about similar issues. The only thing I could come up with was an approach using jQuery to hide/show the select elmenent when hovering over the navigation menu.

http://jsfiddle.net/TaRJQ/

Member Avatar for Troy III

There are articles where I try to explain that UI elements are no real DOM elements but OS provided ctrl's, which tend to (among other unexpected results) refuse z-index instruction and re-surface.

Member Avatar for designershiv

Hey jorgeM,

thanks for your replay, I already tried that and it was working fine.
But in my case, its a dashboard application and it wont be user friendly because all select box generated dynamically. I am working on it, will let you know if i fix this

Member Avatar for Sujay808

HI DesignerShiv

I got same problem. Can u fixed this? If u fixed please help me.

Thank You

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.