Page links style messing up with navigation menu links style. Possible to use different link styles?

Question

I've noticed that the CSS code related to my regular page links had an impact on the navigation items of my webpage navigation menu. How can I avoid that and keep the navigation menu links styled as they initially were? See http://jsfiddle.net/8MwX7/

Many thanks

Page links:

a:link {
    border-bottom: none;
    color: #2d7ddf;
    text-decoration: none;
}
a:hover {
    border-bottom: 1px dotted #2d7ddf;
    background: none;
}
a:visited {
    background: none;
}
a:active {
    background: none;
}

Navigation menu:

nav {
    float: right;
    margin: 20px auto;
    width: 100%;
}
nav ul {
    margin-right: -4px;
    margin-left: 5px;
    text-align: right;
    }
nav ul li {
    display: inline-block;
    margin-right: -4px;
    margin-left: 5px;
    vertical-align: top;
}
nav a {
    padding: 4px 8px;
    text-decoration: none;
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,0.25);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 400;

}
nav a:hover {
    background: rgba(0,0,0,0.35)
}
.activeNav {
    background: rgba(0,0,0,0.35)
}
nav ul li ul {
    position: absolute;
    display: block;
    margin-top: 5px;

    background: none;
    padding-top: 5px
}
nav ul li ul li {
    display: block;
    float: none;
    margin: 0;
    padding: 0
}
nav ul li ul li a {
    display: block;
    text-align: left;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px rgba(0,0,0,0.33);
    padding: 10px
}
nav ul li ul li a:hover {
    background: rgba(20,150,220,0.5);
    color: white;
    text-shadow: 0 1px rgba(0,0,0,0.5)
}
.hover a {
    display: block;
}
.hover span {
    color: rgba(255,255,255,0.9);
    background: rgba(20,150,220,0.5);
    border-radius: 5px;
    position: absolute;
    display: block;
    margin: 5px 0 0 -57px;
    padding: 10px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
}

How were they styled, and what is wrong now? Please provide more details — imbondbaby, Jun 29 '14 at 09:39
@imbondbaby that you can easily see if you remove the common css for `` given separately in question... — T J, Jun 29 '14 at 09:43

score 1 · Answer 1 · edited May 23 '17 at 11:57

I would like to add that using the !important keyword in CSS is generally considered bad practice.

What are the implications of using "!important" in CSS?

http://james.padolsey.com/usability/dont-use-important/

The reason your styles are not working correctly because

    a:link, a:hover, a:active, a:visited

are considered more specific than

nav a

If you would like to correct this without using the important tag then modify 'nav a' to the following:

nav a:link, nav a:hover, nav a:active, nav a:visited {
    padding: 4px 8px;
    text-decoration: none;
    color: rgba(255,255,255,1);
    background: rgba(0,0,0,0.25);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    font-weight: 400;
}

The code above makes the following css:

nav a:link, nav a:hover, nav a:active, nav a:visited

more specific than

a:link, a:hover, a:active, a:visited

Here is a link to an updated fiddle: http://jsfiddle.net/8MwX7/2/

score 0 · Accepted Answer · answered Jun 29 '14 at 09:39

0

Mark the styles of your menu with !important to prevent it from being overridden.

nav a {
 /*other css rules*/
 color: rgba(255,255,255,1) !important ; 
}

Updated Fiddle

answered Jun 29 '14 at 09:39

T J

42,762
13
83
138

Page links style messing up with navigation menu links style. Possible to use different link styles?

2 Answers2