Create a Horizontal Navigation using HTML5 elements

[MARS]

It seems like there are so many ways to create a horizontal nav, but i want to try to create one without ID’s and making proper use of cascading.

I was really excited about using SASS but had to abort mission because none of what i was using was affecting my navigation so i decided to hand code it out long form and i still can’t figure it out.

Here is the markup:

• Home
• Brands
• About Us
• Contact

Here is the CSS:

header {
width: 100%;
height: 134px;
display: block;
margin: 0;
padding: 0;
}

header, img {
width: 111px;
height: 92px;
display: block;
float: left;
margin: 0;
padding: 0;
}

nav {
width: 100%;
height: 60px;
display: block;
float: left;
margin: 0;
padding: 0;
}

nav, ul {
float: left;
width: 100%;
overflow: hidden;
}

nav, li{
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}

nav, ul, li, a {
display: inline-block;
float: left;
width: 100%;
height: 30px;
padding: 5px;
text-decoration: none;
color: #000;
}

I can’t even make the bullet points disappear, which i used to be able to do but in my attempt of trying to write unbloated css i’m finding myself over thinking things, but i have to keep trying to become a better coder so here’s my attempt at doing that. I used to create all kinds of divs to make things work and while it did i wasn’t happy just settling, especially after all i’ve read here on CSS tricks.

Anyways i used to test in FF now i’m mainly starting in Chrome but i can’t even seem to over-ride the user agent style sheet.

Any advice would be greatly appreciated.

Thanks.

[MARS]

it took me 3 tries to figure out how to format.

[waylaid]

Take the commas out from between your selectors i.e.

nav, ul _should be_ **nav ul**

nav, ul, li, a _should be_ **nav ul li a**

otherwise your CSS rule will apply to every selector in the comma seperated list rather than cascade.

In the long run you’ll be better off using some classes :P

[jurotek]

@MARS,
If you not planing to add any drop-downs to your hor. nav, you can greatly simplify your mark up [Like This](http://cdpn.io/CfsmG “”)

[MARS]

@CrocoDillan, thanks lol. Great suggestion on the Codepen, will use from now on when posting.

@Waylaid, thanks for the tip i didn’t know that.

@jurotek, that’s a cool trick thanks.

[Author]

Posts