css - How to fix the shadow on my menu, Fiddle example shown -
thanks ahead of time everyone. have been working on menu in css , html , can't figure out how make shadow appear around whole menu item + sub-menu instead of part drops down. should covering it, it's not:
my code here: http://jsfiddle.net/clare12345/nq4rv/1/.
#listitems:hover { box-shadow: 2px 4px 8px #888888; } #menu ul li:hover ul li { display:block; box-shadow: 2px 4px 8px #888888; } <div id="menu"> <ul> <li><div id="listitems"><div id="menuheader">steps:</div><a href="#nogo">section one</a> <div id="smalltext">description text here</div> <ul> <li><a href="#nogo">a</a></li> <li><a href="#nogo">b</a></li> </ul> </div>
i tried putting shadow on pretty :hover , made shadow on top of 1 have. shadow showing around correct places on top, bottom, , left sides, on right "description text here" , above it, including top of menu not in shadow.
i'm not sure how fix it. if offer help, i'd appreciate it!
edit: i'm trying figure out how put more 1 of "sections" inside each of "steps." i'm not sure how inside list. need make several lists , float them next each other? still want able nicely utilize box-shadow! thank you!
if remove top
property #menu ul li:hover ul
, , set position: relative;
on #listitems:hover
, pretty nice shadow.
please edit markup. if want repeat selector many times on page, use class instead id.
Comments
Post a Comment