I like doing things in an organised fashion, and I’m sure most of you do to. I write my CSS, HTML and jQuery in a certain way which I don’t change, unless I decide I’ve found a more efficient way of doing it. For example, I include the CSS reset in every single thing I work on and I would feel as if something was missing if I didn’t, however I have no problem editing the reset if I think it would be more efficient.
I have already done the Fading Navigation Menu tutorial, however it is a bit advanced for a beginner. This simple navigation menu tutorial will help you create a very basic horizontal navigation menu using semantic HTML and minimal CSS. You will need to know basic CSS properties and how CSS selectors work to understand the tutorial.
People tend to become upset and/or frustrated (Including me) when something simple doesn’t work, such as jQuery not working. Before you do anything, navigate to your jQuery file and check that it is exactly where it should be.
The :hover pseudo-class is a very important CSS function. It can be used to highlight text, table-cells, divs, images and much more. Without it websites would be very bland and boring.
Unfortunately, there is an IE6 hover problem which greatly affects how we can use the :hover pseudo class.
As we all know too well, IE6 has many issues, one of which is the IE6 height problem. The outdated browser reads the CSS differently to the modern browsers, and it places emphasis on things that aren’t too important.
Use IE6 to view the demo