CODEWITHSUNDEEP
drop-down-menumenucss
Clare12345
Clare12345

Reputation: 191

How to fix the shadow on my menu, Fiddle example shown

Thanks ahead of time everyone. I have been working on a menu in CSS and HTML and I just can't figure out how to make the shadow appear around the whole menu item + sub-menu instead of just the part that drops down. This should be covering it, but it's not:

My code is 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 a shadow on pretty much everything with :hover and it usually just made an extra shadow on top of the one I already have. The shadow is showing around all the correct places on the top, bottom, and left sides, but on the right only where the "Description Text Here" is and above it, including to the top of the menu is not in the shadow.

I'm really not sure how to fix it. If someone would offer some help, I'd really appreciate it!

Edit: I'm also trying to figure out how to put more than one of the "Sections" inside each of the "Steps." I'm just really not sure how to do that inside a list. Do I need to make several lists and just float them next to each other? I still want to be able to nicely utilize the box-shadow! Thank you!

Upvotes: 0

Views: 286

Answers (1)

Miljan Puzović
Miljan Puzović

Reputation: 5820

If you remove top property from #menu ul li:hover ul, and set position: relative; on #listitems:hover, you will get pretty nice shadow.

http://jsfiddle.net/Nq4rV/2/

Please edit your markup. If you want to repeat some selector many times on page, use class instead ID.

Upvotes: 1

Related Questions