javascript - Z-index issues, z-index isn't working as it should -
my issue when ever links hover, hidden sub menu pushes below div it. i've tried playing around z-index still no luck. can please me this. my jsfiddle
html:
<div class="row" id="top-eybrow"> <div class="eyebrow-section right text-left"> <ul> <li> <a href="#">sign in</a> </li> <li> <a href="#">register</a> </li> <li> <a href="#">my acount <i class="fa fa-sort-desc dropdown-i fa-fw"></i></a> <ul> <li> <a href="#">add listtings</a> </li> <li> <a href="#">update profile</a> </li> <li> <a href="#">view listings</a> </li> <li> <a href="#">my sales</a> </li> <li> <a href="#">messages</a> </li> </ul> </li> <li> <a href="#">help</a> </li> </ul> </div> </div> <div class="clearfix clear-columns"></div> <div class="row clearfix leaderbord-ad"> <img src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/screen_shot_2015-06-01_at_4.42.14_am.png"> </div>
css:
.eyebrow-section { margin-right: -45px; position: relative; z-index: 100 !important; } .leaderbord-ad { padding-top: 10px; position: relative; z-index: -100 !important; }
as said z-index not issue here. add line css
.eyebrow-section ul ul { position: absolute; }
Comments
Post a Comment