Question

I’m using CSS to style some buttons. I want to make white blocks with a drop shadow and when you hover over it I want to make the drop shadow go away. Here is the CSS I’m using.

#mainMenu li a:link, #mainMenu li a:visited {
   font-family: sans-serif;
   display:block;
   color: #000;
   width:;
   height:40px;
   text-decoration: none;
   /* top right bottom left */
   background:#FFF;
   padding: 0 30px 0 30px;
   margin-right: 20px;
   line-height: 40px;
   /* DROP Shadow */
   -moz-box-shadow: 3px 3px 4px #000;
   -webkit-box-shadow: 3px 3px 4px #000;
   box-shadow: 3px 3px 4px #000;
}

/* Change this to add images to buttons for rollover*/
#mainMenu li a:hover, #mainMenu li a:active {
   font-family: sans-serif;
   display:block;
   color: #000;
   width:;
   height:40px;
   text-decoration: none;
   /* top right bottom left */
   background:#FFF;
   padding: 0 30px 0 30px;
   margin-right: 20px;
   line-height: 40px;
}

I however, when I try to test this, the drop shadow doesn’t go away. Any Ideas?

Here is the HTML I’m using.

<div id="header">
    <div id="mainMenu">
        <ul>
            <li><a href="####">Home</a>
            <li><a href="####">About</a>
        </ul>
    </div><!-- mainMenu -->     
</div><!-- header -->

Thanks,
Mike

Answer 1

You’re not telling the CSS to remove the style. Remember that CSS styles are cascading, which means that if you tell a button to have a shadow, it will always apply that shadow unless you tell it not to in another class.

In this case, all you need to do is change your second CSS class to the following:

/* Change this to add images to buttons for rollover*/
#mainMenu li a:hover, #mainMenu li a:active {
    font-family: sans-serif;
    display:block;
    color: #000;
    width:;
    height:40px;
    text-decoration: none;
    /* top right bottom left */
    background:#FFF;
    padding: 0 30px 0 30px;
    margin-right: 20px;
    line-height: 40px;

    /* REMOVE drop Shadow */
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

If you want the shadow to only go away when you hover (and for it still to be there when your link is in its active state, then you need another CSS class for that. A la:

#mainMenu li a:hover {
    /* REMOVE drop Shadow when hovering only */
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

HTH.