html - Box-shadow on mega drop-down -



html - Box-shadow on mega drop-down -

i have little problem mega drop-down menu's box-shadow. shadow should visible above "second list item", , actual :hover li item should above dropdown box's shadow. tried set different variations of position , z-index properties, can't solve it.

html:

<ul> <li>first list item <div id="sub">sed id dolor nec odio cursus tincidunt. ut tristique nulla odio, vitae ornare ligula tincidunt vitae. sed cursus, erat eleifend bibendum auctor, quam diam pellentesque eros, ut consequat quam erat non ipsum. cras ut ultrices leo. aliquam blandit scelerisque sem @ volutpat.</div> </li> <li>second list item</li> </ul>

css:

ul { padding: 0; margin: 0.2em; } ul li { background: orange; width: 175px; height: 22px; display: inline-block; position: relative; transition: .25s ease; padding: 5px; margin 0; cursor: pointer; } ul li #sub { background-color: #222; width: 300px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1); position: absolute; left: 0px; top: 32px; visibility: hidden; opacity: 0; transition: visibility 0.2s ease, opacity 0.2s ease; z-index: -20; padding: 0.7em; color: white; cursor: initial; } li:hover #sub { visibility: visible; opacity: 0.9; transition-delay: 0s; }

http://jsfiddle.net/r4xrj/

how solve it? ideas?

as submenu casts shadow on next <li> items, can accomplish aim + css selctor. allow specify negative z-index on next li in markup.

demo

you need add together

ul li:hover + li{ z-index:-2; }

and z-index:-1; ul li .sub

full css :

ul { padding: 0; margin: 0.2em; } ul li { background: orange; width: 175px; height: 22px; display: inline-block; position: relative; transition: .25s ease; padding: 5px; margin 0; cursor: pointer; } ul li:hover + li{ z-index:-2; } ul li .sub { background-color: #222; width: 300px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1); position: absolute; left: 0px; top: 32px; visibility: hidden; opacity: 0; transition: visibility 0.2s ease, opacity 0.2s ease; padding: 0.7em; color: white; cursor: initial; z-index:-1; } li:hover .sub { visibility: visible; opacity: 0.9; transition-delay: 0s; }

html css html5 css3 drop-down-menu

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more