CSS3 box-shadow

HTML & CSS
1

Using box-shadow selector on the navigation menu, the right side of the shadow is behind other elements, how can i bring this to the front.

The nav bar is images that change on :hover.

http://www.mymarketingsolutions.com/Site

Any help would be appreciated.
Thanks
Ryan.

2

You need to take the shadow effect from a and put it on li, since a, being inside li, won’t show it, when li is surrounded by other elements.


#nav li:hover{
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
z-index:999;
}
3

Awesome - Thank you, and especially for the explanation of why/what I was doing wrong.

4

You’re very welcome. :slight_smile:

5

Sorry - I have a similar issue on the sub-pages.

http://www.mymarketingsolutions.com/Site/webmarketing.html

When hovering over the 4 “solutions” under the main image - if not exactly over the text the transition doesn’t change the text to #fff but it does change the background color losing the text.

Hover over the “Website Design & Maintenance” box.

Any help again would be appreciated.
Thanks.
Ryan.

6

Try this:


.aside .ul2 li:hover a .txt-2{color:#fff!important}
7

A quick fix:


.aside .ul2 li a {
    color: #54075B;
    display: block;
    font-weight: normal;
    line-height: 1.33em;
    [COLOR="Red"]padding: 23px 23px 38px 30px;[/COLOR]
    text-decoration: none !important;
[B]    height: 100%;
    width: 100%;
[/B]}

But you have divs inside those as, which is not good. And there are a few more problems in your code, which you would need to address.

The problem is that a doesn’t take up all the width and height its parent li has. It takes only the top half of li, and the div that’s contained in it takes the middle of li. Together they account for most li “surface”, except the bottom-right corner, where the problem appears.

Since you have to different hover events: one for li and one for a, you get two different results, visible when you hover over li (bottom-rigth corner) by not changing the a color also, as it does on hovering over a (top half) or the div inside a (middle).

As a side note, I would move the padding to li (the red code), or find another way to center my text.

8

You wouldn’t need to change anything else with my method as the changes are effected from the outer element. You don’t need to be on the text for it to change.

I answered a similar question about a dropdown menu and people forget that you can make changes to inner elements without needing to hover right over them.

9

lol Paul.

I believe your advice to the OP should be quite the contrary: to change its bad markup and bad CSS.

You forget to mention the disjointed hover. :slight_smile:

10

The page is using an html5 doctype so anchors are allowed to wrap divs (even if I do hate it and it causes bugs) - which is why I didn’t mention it but perhaps I should have said something :slight_smile:

You forget to mention the disjointed hover. :slight_smile:

I see no problem with the hover as the background color change was on the parent which was fine and the text colour change was only needed on the child so we can do that without changing anything.

It may have been neater of course to have it all done on one element but I was must making the point that we can change inner elements even when they are not hovered by using the hover on the parent. It’s a useful trick - that’s all I meant :slight_smile:

11

Thanks a lot - Paul your small amount of code has fixed my issue.

Noonope - I do see what you are seeing and a lot of this code is not how I would like it to look, as I hate dealing with templates especially when they want to make as many changes to it as they have.

I am hoping to do some cleanup on the code after the site goes live as the client is really pushing to get this up.

Again Thanks guys.

12

@Paul
No, I meant that aside from dropdown menu, disjointed hover is another scenario where “you can make changes to inner elements without needing to hover right over them”.

The html DTD is 5, but the mark up it’s an ostrichamel (RO: “struţo-cămilă” to EN: “ostrich-camel”). Like the OP didn’t had the time to convert its HTML 4 to HTML5 completely. :slight_smile:

@FPMSI
You’re welcome. :slight_smile: