fedorovdim
New Member
I have a z-index issue on top-navigation with a menu and its sub-menu, i want menu to overlap sub-menu, i have set z-index of menu higher than sub-menu, but it is not working sub-menu is overlapping menu as default.Please see and suggest any possible way to do it.jsFiddleHTML\[code\]<div id="login"><ul><li id="overlap"><a href="http://stackoverflow.com/questions/12784221/#">Log In | Join</a> <ul class="tsm"> <li><a href="http://stackoverflow.com/questions/12784221/#">Log In</a></li> <li><a href="http://stackoverflow.com/questions/12784221/#">Join</a></li> </ul></li></ul></div>\[/code\]CSS\[code\] #login { margin: 0px auto; width: 1000px; height: 38px; background: #343438;}#login ul { float: right; margin: 0px; padding: 0px; width: auto; height: 38px;}#login ul li { float: left; width: auto; height: 34px; display: inline; list-style-type: none;}#login ul a { color: #FFF; display: block; width: auto; height: 34px; font: bold 16px/34px "Arial Narrow", Arial, sans-serif; text-decoration: none; text-align: center; padding: 0px 15px; text-shadow: 0px -1px #000;}#login .tsm { padding: 20px; background-color: #F2F2F4; width: 230px; height: auto; text-align: left; border: 4px solid #777; position: absolute; visibility: hidden; top: 32px; right: 0px; z-index: 100;}#login .tsm li a { width: 230px; height: 30px; margin-bottom: 1px; text-align: left; padding: 0px; text-decoration: none; color: #000; text-shadow: 0px 1px #fff; font: 15px/30px Arial, sans-serif; border-bottom: 1px solid #DDDDDF;}#login ul #overlap { position: relative; border: 2px solid #900; z-index: 1000;}#login ul li:hover .tsm { visibility: visible;}#login ul ul li { border: none;}\[/code\]