CSS Tutorial 5 - Navigation Bar using only CSS

In this tutorial I show a great method of making a navigation bar with rollover effects using only css. A good navigation bar is one that requires no javascript or outside scripting so it wil work no matter how a users has configured their browser. I introduce you to floating elements within this tutorial and also formatting the anchor tags. Dont be shocked I will be doing a tutorial on each element and more indepth.
This is just a taster of what css go do......Enjoy.

Category:

Howto & Style

Tags:

• CSS
• TUTORIALS
• NAVIGATION
• BARS
• USING

[ryebread761]

Useless video doesn't work.

[thornwebdesign]

@ryebread761 Thanks for the feedback.....Great Comment.....

[thornwebdesign]

@diacron Once again thanks for the feedback...be it good or bad....My next tutorial will be useful......"How to listen and follow a Youtube Video Tutorial from start to finish (and watching twice if need be,etc)".....

[abishan10]

What does "float:left" do? I'm doing a piece of ICT AS Coursework and I am supposed to have a column on the left side of the page 200 pixels wide (reserved for a vertically orientated text-based navigation bar). It's working fine atm, but I assumed that since it wants it on the left side of the page that I should use float:left. But it seems that it should not have any float.

[nightfuries21]

@ryebread761 You just dunno how to follow instructions ^_^

[PearSquirrel]

@mutumbakenya That's why you would put padding in the ul.

padding-left: 30px;

[mutumbakenya]

@PearSquirrel but you notice there remains a section on the far left without the hover.as in the hover does not extend to the far left of the navbar div

[mutumbakenya]

good job chap!with just CSS its a good job

[mutumbakenya]

@sem785 in the navbar in CSS add margin-top:30px;

[PearSquirrel]

I would probably use an unordered list instead of all of these divs. It would be more recognizable by search engines and it's considered better practiced, not to mention more organized. It's a similar concept, just replacing the parent div with a 'ul' or 'menu', and the child divs with 'li'. The same css would be used, with the addition of using 'list-style-type:none;' for the li's. Great tutorial!