So, everything works fine when I look at the website with the html files on my computer, but when I put the site up live the hover over images for the nav don’t work. I’m referring to the links “Home”, “Areas of Practice” and the other ones that have the grey background image.
Any help would be appreciated because I don’t even know what to look at to solve this problem since the hover over state works fine when the files are on my computer.
The nav seems to be working in all browsers apart from ie8 and below.
You are using an awkward structure though and I’m not sure why you are using first-child when the element is the only child anyway and thus cutting out older browsers.
It would also be better to change the background-position of a sprite rather than load a new image on hover as there is an ugly delay when you first hover the item. If you use the sprite approach there is no delay.
I would also avoid changing the size of the element on hover as that interrupts the flow and makes all the element jump. Try never to change an objects size on hover where it affects others in the flow.
A list with only one item is not really a list and if you have sub menus then a nested list would be better.
