Pesky Suckerfish Nav

HTML & CSS
1

This is one of those simple css issues that just fries my brain. I think I’m telling my target two things at once but can’t be sure.

I have a div with a background image that serves as navigation on this website. Only one of the three main buttons has the drop down suckerfish style navigation functionality. I set the css ‘color’ property to change the text to white on hover for these, but when you roll over the middle one, About The Fund, it isn’t responding … or is being overridden.

I’m just trying to get the words “About The Fund” to change to white upon hover.

http://elasticitydev.com/iSelectFund/

Thanks
| scott

2

Hey Scott,

I’m a newbie myself, but the amount of questions I ask on here, I think its time I should give something back!

I hope this works:

#menu li ul li a:hover {
background-color:#1c1c1c;
padding:10px;
display:block;
width:306px;
color:#FFF;

If this doesnt work, I’m sure someone will correct me :slight_smile:

Cheers

3

You’re not getting it because the structure is different for that item - if you look at the other links, you’ve got the div & UL inside the <a> element (which, while allowed in HTML5, is clunky and clumsy and not all the browsers support it cleanly…, but for the one you’re having an issue with, the <a> is inside the div and ul, so you’re structure is completely different, and different rules of specificity will apply.

Just because you place a class/id on an element doesn’t mean that is the css which will be applied. Read this thread for more information.

4

I figured it was something like that. I still can’t seem to target it correctly. What would be a way to just tell that whole div to change color to whit on hover.

I just tried this:

#menu li a:hover {
color:#FFF;
}

But that only works obviously when you roll over the actual anchor. I need it to light up the whole time the button is over it.

5

This should work, but there might be browser quirks…

#menu li:hover > a, #menu li a:hover { color: #fff; }

6

That definitely is working in all my current browsers. I’d like to better understand why though. It looks like you targeting the same anchor in two different ways simultaneously. I don’t see how either of those is making the whole <div> area serve as a hot spot for the rollover …

While I was checking it in Safari 5.1.5, I noticed that it displays an underline when you hover over those same three links. I tried placing an !important on the text-decoration:none; but that didn’t get it. Any idea what I need to tell Safari to get it to knock that crap off?

7

I noticed another anomaly. It only works when you roll up on it from the bottom. If your mouse comes down on the button from the top of the screen it won’t change to white until you actual are over the anchor itself.

I’m wondering if there is maybe something I can do in jquery that will override just that one link an make it white on rollover?

8

I don’t see why we are even talking about styling anchors. the only element in question here is a div with class .threeNav_pos2_off.

When you roll over that, there is code in place that should be turning that text white. I can’t see why it matters that there is extra markup in this div. We seem to be saying with our css: anytime you :hover a div called .threeNav_pos2_off, turn the text white. It seems like it should be more straight forward than this.

9

See post #2 (and the link I posted there) - you’re getting bit by the specificity bug. Even though the item has the class on it, the #menu li a has more hits on that element, which is why it tags them and overrides.

10

Hello. I was asked to code a website that uses a very unconventional style of Nav. I don’t think the designer was thinking that everything would one day need to be recreated with HTML and CSS. Anyway, what we have is more like three Nav structures in that there are three separate unordered lists being utilized. One for each button.

Since the outer two don’t have drop down suckerfish navs we don’t need to worry about those, they function fine. The problem lies with the “About The Fund” button in the middle. The only way I could figure to get a dropdown suckerfish menu working on that was to nest another <ul> within an <li> of a parent list. I realize that this makes this structure unlike the other two in it’s markup and that this may be causing some difficulty, but I don’t think so since the div I am rolling over is higher up in the markup (meaning less nesting).

What I’d like to see happen is when you rollover the entire div with a class=“threeNav_pos2_off” the text would change to white. Again the other two are working fine so you can roll over those to see how the middle button should work. It’s just that it will also slide down the suckerfish list. It may look as though this is working, but if you look close you will see that the text only changes to white if you mouse directly over the actual anchor tag. Or, for some reason, if you mouse over the button in an upward direction from the bottom. If you roll into the area from the top, the text stays dark until you encounter the anchor …

Somewhere in my CSS I must have something that is over riding this effect because the text stays #353535 throughout. I’m using the entire containing div (.threeNav_pos2_off) as my “hotspot” for the hover behavior.

So, what I’d like to understand is how to make that text change it’s color to white. Or if worst comes to worst, maybe I need to rebuild this entire thing. Is there a better method for doing a drop down like this when not utilizing the traditional “list” style markup for their navigation.

http://www.savagepixels.com/iselect/

11

I see. So then the question becomes, how do I target this text in the “most specific” way possible? I tried adding an ID to that div which should be most specific of all, and that didn’t work either.

I tried:

<div class="threeNav_pos2_off inside" id="aboutTheFund"> <ul id="menu"> <li><a href="about.html"><p>About The Fund</p></a> <ul class="active"> <li><a href="structure.html">fund structure</a></li> <li><a href="management.html">fund management</a></li> <li><a href="distribution.html">fund distribution</a></li> <li><a href="selection.html">company selection</a></li> </ul> </li> </ul> </div>

So, I added an ID to the same div with the with .threeNav_pos2_off

My CSS looks like this:

#aboutTheFund:hover { width:347px; height:87px; float:left; background-image:url(…/img/three-nav-struct_faq_hover.png); background-repeat:no-repeat; color:#FFFFFF; }

Didn’t work. Not specific enough?

12

This question originated in a different post and it was suggested there that specificity is the issue. I think that’s true but then would need to target the text in that button in such a “specific” way that it takes precedence over and other styling. How to do that …

What if I add an ID to that same DIV?

Is this even possible?

13

That’s why I pointed you to that other thread in post #2- it specifically deals with this issue (I should know as I started the thread because it didn’t make sense to me either). CSS selector Specificity doesn’t necessarily work in a logical/programming manner. It’s basically a count issue.

#abouttheFund or .threeNav_pos2_off will never win because it’s only one match on the selector scale.
#menu li a:hover is three (#menu, li and a), so it will always win.

There is an blog post and infographic in that thread from Andy Clarke which hopefully will explain it a little better: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html or for just the infographic: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg

14

I read the excellent article. Thank you for posting that. My problem isn’t in understanding what’s wrong so much anymore as in trying to understand how to fix it. It sounds like I need to code something really convoluted in there like. Why not start at the top of the dom (or thereabouts) if that’s the case.

body .threeNavStructure threeNav_pos2_off:hover

But that doesn’t work.

| scott

15

I’ll be honest, I’d rework that whole navigation - it’s a lot more complicated than it needs to be:


	<ul class="threeNavStructure">
		<li><a href="index.html">Home</a></li>
		<li><a href="about.html">About The Fund</a>
            <ul class="active">
				<li><a href="structure.html">fund structure</a></li>
				<li><a href="management.html">fund management</a></li>
				<li><a href="distribution.html">fund distribution</a></li>
				<li><a href="selection.html">company selection</a></li>
		   </ul>
		</li>
		<li><a href="faq.html">FAQ</a></li>
	</ul>

Then, I’d style the un-ordered list. Float the li elements, setting a common width and background-image to them. Then you can set the font-color on the hover like you had earlier.

16

It’s just complicated because that’s the only way I could figure to make it work. So your suggesting I treat the <ul> as though it’s the containing <div>? Just eliminate the whole <div> all together? Or is the structure you suggest to be nested inside the <div> I had earlier?

Never would have thought of that, but I’m game for anything and need to get this working.

17

That’s how I’d handle it - try to simplify the structure and the styling, and get rid of the extra cruff…unless @Paul_O_B has a better approach…

18

Are you sure you can execute all of this in a list? Seems like list abuse …

Can’t get them to float when doing it this way … what the …

http://www.savagepixels.com/iselect/

19

They are floating - you just need to add a margin-top to the a element (I used em, but you can pixel it out if you really want to): #primaryNavigation a { display:block; text-decoration:none; margin-top: 2.25em; }

Then to get your highlighting you like: #primaryNavigation li:hover, #primaryNavigation li a:hover { color: #fff; }

20

After doing all that markup and css work … now I can’t get anything to change to white. I was better off before. Ahhhhhhh …

Here’s the css
.threeNavStructure { width:1035px; height:87px; margin:0px auto 10px auto; font-family: ‘Arvo’, serif; }
#primaryNavigation { text-align:center; }
#primaryNavigation a { text-transform:uppercase; font-weight:bold; }
.threeNavStructure ul li { float:left; }
.homeNav_on { width:350px; height:87px; background-image:url(…/img/three-nav-struct_home_on.png); background-repeat:no-repeat; padding-top:34px; color:#FFFFFF; }
.aboutNav_on { width:338px; height:87px; background-image:url(…/img/three-nav-struct_about_on.png); background-repeat:no-repeat; padding-top:34px; color:#FFFFFF; }
.faqNav_on { width:347px; height:87px; background-image:url(…/img/three-nav-struct_faq_on.png); background-repeat:no-repeat; padding-top:34px; color:#FFFFFF; }
.homeNav_off { width:350px; height:87px; background-image:url(…/img/three-nav-struct_home_off.png); background-repeat:no-repeat; padding-top:34px; }
.aboutNav_off { width:338px; height:87px; background-image:url(…/img/three-nav-struct_about_off.png); background-repeat:no-repeat; padding-top:34px; }
.faqNav_off { width:347px; height:87px; background-image:url(…/img/three-nav-struct_faq_off.png); background-repeat:no-repeat; padding-top:34px; }
.homeNav_off:hover { background-image:url(…/img/three-nav-struct_home_hover.png); }
.aboutNav_off:hover { background-image:url(…/img/three-nav-struct_about_hover.png); }
.faqNav_off:hover { background-image:url(…/img/three-nav-struct_faq_hover.png); }
.homeNav_on a { color:#FFFFFF; }
.aboutNav_on a { color:#FFFFFF; }
.faqNav_on a { color:#FFFFFF; }
.homeNav_off:hover a { color:#FFFFFF; }
.aboutNav_off:hover a { color:#FFFFFF; }
.faqNav_off:hover a { color:#FFFFFF; }

Sure like to get that darn text white on rollover and when you are on that page. Obviously I’m not targeting the anchors correctly or they are getting overridden. Am I just doing something stupid?

http://www.savagepixels.com/iselect/index.html