Question

I have a fixed header div and a fixed side bar div on a web page. A shadow extends past the height of the menu. When the menu shadow overlaps the links, they are only partially hoverable. I’ve not find a way to change the z-index of the links. Can someone help me?

Example:
http://jsfiddle.net/Kf6Fw/2/

Answer 1

One way of solving it is to add another div, #top-wrap, around #top

<div id="side">
    <div id="top-wrap">
        <div id="top">
            <a href='#'>Dictionary</a>
            <a href='#'>Comments</a>
        </div>
    </div>
</div>

So you can set the that with a lower z-index than that of #menu_all

#top-wrap
{
    height:50px;
    width:100%;
    background-color:green;
    margin-top:75px;
    font-size:20px;
    z-index:4;
}

#top
{
    position:relative;
    z-index:6;
}