fly-out menus, want some items not linked to have hover state not appear

Brad Bansner
Brad Bansner used Ask the Experts™
on
On this page:

http://www.dbiservices.com/new/deangelobrothersinc/railroad.asp

Relevant CSS is attached. Someone else built this website, I am being asked to make a change, and I am stuck. I think what I want to do is relatively simple, there are two places in the menus on the left where it says:

<a href="#">Mechanical Services:</a>

In those cases, I don't want the background (hover) state to appear. I got around the linking by making it "#" obviously, but client wants the hover state removed. But if I remove the <a> tags around it, then the style is completely broken. I'm hoping someone a little better with writing CSS can show me how to do this? Thank you!
li.mainlinks {
		position: relative;
		display: block;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 11px;
		line-height: 21px;
		color: #000000;
		margin: 0px;
		padding: 0px;
	}
li.mainlinks:hover span.mainlinksfly {
		display: inline;
	} 
span.mainlinksfly {
		position: absolute;
		z-index: 3;
		top: 1px;
		left: 230px;
		width: 200px;
		display: none;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 11px;
		line-height: 13px;
	}
span.mainlinksfly a {
		padding-bottom: 4px;
		background-color: #e7eeda;
		padding-left: 8px;
		padding-right: 0px;
		display: block;
		padding-top: 4px;
		z-index: 1000;
		position: relative;
	}
span.mainlinksfly a:hover {
		background-color: #d5e2c0;
		z-index: 1000;
		position: relative;
	}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011

Commented:
Is this menu generated dynamically from a CSS or is it hand-coded?

If it is hand coded you could use a class on the link.

Markup

<a class="no_back" href="#">Mechanical Services</a>

Open in new window


a.no_back, a.no_back:hover {
  background: transparent !important;
}

Open in new window


Top Expert 2011

Commented:
Sorry, that should say

Is this menu generated dynamically from a CMS?

Not CSS. Typo.
Top Expert 2011
Commented:
You could also try something like this:

span.mainlinksfly a, span.mainlinksfly p {
		padding-bottom: 4px;
		background-color: #e7eeda;
		padding-left: 8px;
		padding-right: 0px;
		display: block;
		padding-top: 4px;
		z-index: 1000;
		position: relative;
	}

Open in new window


And change your markup to
<p>Mechanical Services</p>

Open in new window


All of this is limited to if you are able to edit the source code or not.
Brad BansnerWeb Developer

Author

Commented:
Brilliant, I love it. Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial