Question

I have navigation menus right underneath a big 120px h1 and when I hover my cursor over upper parts of the navigation, instead of selecting the list item and triggering the a:hover, my cursor selects the text of h1. In other words, because the navigation is in the h1’s descender region, my cursor opts to select h1 instead of the navigation. The website in question is: http://www.seunghomattyang.com/

I tried adjusting z-index value of h1 to negative so that the navigation would stay on top of h1 but it didn’t work. I’ve also tried reducing the line-height but that did not seem to work either.

Is there a workaround for this problem (besides making an image of h1)? I really want to avoid creating too much extra space between h1 and the navigation.

Thanks in advance for your help.

Answer 1

Set #nav a to include position: relative; and z-index: 1;. The position: relative is what you were missing I think.