Pure CSS Navigation

2 comments - Post a comment

One of the things I have been playing around lately is different blog navigation styles and specially how to create pure CSS navigation, without any JavaScript, external images and other stuff. This is what I have made so far. Check the code below and feel free to ask anything about it.

view live demo

pure CSS navigation

.bar, .ncontent {
font-family: Garamond, sans-serif;
.bar {
width: 200px;
border: 1px solid black;
background-color: #669999;
text-align: center;
font-weight: bold;
.bar+.ncontent {
display: none;
.bar:hover+.ncontent {
width: 200px;
border: 1px solid black;
display: block;
.ncontent:hover {
display: block !important;
width: 200px;
border: 1px solid black;
.bar:hover+.ncontent ul,
.ncontent:hover ul {
list-style-type: none;
padding: 0;
margin: 0;
.bar:hover+.ncontent li,
.ncontent:hover li {
text-decoration: none;
text-align: center;
padding: 3px;
font: Geneva, Helvetica;
font-size: 0.8em;
background-color: #E0DFB3;
.bar:hover+.ncontent li a,
.ncontent:hover li a {
text-decoration: underline;
color: #333333;

Class 'bar' is used for styling navigation sections and class 'ncontent' for navigation sub-content.

AddThis Social Bookmark Button

This Post has 2 Comments Add your own!
sun security - 28 November 2008 at 11:29

This is a great menu system. I have been trying to find a way to avoid javascript myself.

admin - 30 November 2008 at 17:53

thanks, glad you like it

Post a Comment