Trying to identify css rule

HTML & CSS
1

Hi everyone,

The image below shows a screenshot of part of the nav menu at a website. I’m trying to find out the css rule that renders the border around the “About” link in the menu. It seems to have a darker colour on the top, left and right side and then a lighter colour on the bottom.

I’ve tried using the developer tools in Chrome to identify the css rule that defines the formatting but I can’t find it. The link to the website is:

http://bc-church-us.businesscatalyst.com/about

I wondered if anyone could help me out?

Thanks in advance for any help.

2

[font=calibri]Holy moley, that’s a tangle of CSS there…

It looks to me as though it’s the following line in /_assets/css/foundation.css

  .top-bar-section > ul > li.hover > a,
  .top-bar-section > ul > li:hover > a,
  .top-bar-section > ul > li > a:active,
  .top-bar-section > ul > li > a:hover,
  .top-bar-section > ul > li.selected > a {
	background: #2f4255;
    color: white;
	
   -moz-box-shadow:    0 1px 0 #5a6b7c, inset 0 0 3px #242424;
   -webkit-box-shadow: 0 1px 0 #5a6b7c, inset 0 0 3px #242424;
   box-shadow:         0 1px 0 #5a6b7c, inset 0 0 3px #242424; }

although there are much easier ways to achieve the same effect (namely using a simple set of borders!).[/font]

3

Great, thanks so much.