Nav Help: image for first level, text for second level

  • I have been trying several ways to have a first level of navigation using images (with rollovers using CSS) and a second level of dropdown menus using the text.

    Currently I have the first level nav with the images hiding the text with a span class that is set to display: none; in the css.

    Can anyone help with this?

    View site here:
    https://pennsylvaniacrafts.com

    The second level is showing up with the first level’s image, confusing me even me further.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Don’t hide navigation link text using display:none. You’re effectively hiding your top level navigation from a whole range of non-graphical user agents – including Google. Use a negative text indent or negative absolute positioning instead.

    You’ll may then need to reset the styling for the second level links.

    Thread Starter difaye

    (@difaye)

    Good point. I read that this way allowed the search engines to find it, but it didn’t make sense to me either.

    Thread Starter difaye

    (@difaye)

    The child page is still showing the parent page image as it’s hover state.

    You need to reset the styling for the second level :hover status.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Nav Help: image for first level, text for second level’ is closed to new replies.