Am I adding custom nav’s properly?

[JoshWhiteDesign]

Hey guys,

I’ve been having some trouble with my css code lately and I’m beginning to think I’m arranging it incorrectly. It’s primarily revolving around making the nav menu with css. What it’s doing is picking up properties from my normal page links.

So here is what I usually have:

css:

Code:

a:link {
font-family: Verdana, Arial;
font-size: 12px;
font-weight: normal;
color: #ccc;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial;
font-size: 12px;
font-weight: normal;
color: #ccc;
text-decoration: none;
}
a:active {
font-family: Verdana, Arial;
font-size: 12px;
font-weight: normal;
color: #fff;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial;
font-size: 12px;
font-weight: normal;
color: #fff;
background-color: none;
text-decoration: underline;
}

/* These are the Main Menu Links */

a.nav {
font-family: Georgia;
font-size: 18px;
font-weight: normal;
color: #fff;
text-decoration: none;
line-height:50px;
}

a.nav:hover {
font-family: Georgia;
font-size: 18px;
font-weight: normal;
color: #7a7a7a;
text-decoration: none;
}

And then I’m just adding it in the page code like this:

Code:

Home
About
…

So am I just being inefficient and possibly do something like this:

Code:

#left menu {
width:200px;
}

#leftmenu ul, li {
}

#leftmenu a {
font-family:georgia;
font-size:20px;
}

#leftmenu a:hover {
border-bottom:1px solid #fff;
}

Or is there a different way altogether I should change my technique to?

[dcp3450]

The second way is how i would do it.

your telling the page: If the <a> tag appears in <div id="leftmenu"> act like this. Other wise act normal.

Looks good to me!

[Author]

Posts