I have set up NAV for the top menu with blue letters and a dark blue background and that works fine.
However, when trying to format the links on the page (which has the dark blue of the NAV background) the links disappear in the NAV. Also there is a conflict with font sizes as they are both different (regular links are picking up Nav font size).
Big mess.
How do I prevent the NAV from picking up link settings and visa-versa? I know how to do this in pre CSS3 but then I'd have to name NAV as a class which seems redundatnt being as I'm trying to use CSS3. Here is the relevant code:
html {
/* base font size */
font-size: 16px; }
body {
margin: 0 0 10px 0;
padding:0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 100%; /* 16px*/
background: #fff;
color: #000; }
nav { text-align:center;
background-color: #336699; }
nav ul {
list-style: none;
margin: 0;
padding:0; }
nav ul li {
text-align: center;
display: inline-block;
position: relative;
font-size: 0.938em; } /*15px*/
nav ul li a {
padding: 0.313em 0.813em; /*5px 13px*/
color: #99CCFF;
text-decoration: none;
font-weight: bold;
display: block;
width: 8.750em; } /*140px*/
nav ul li a:hover {
color: #FFCC33;
font-size: 0.938em; } /*15px*/
nav ul ul {
display: none;
position: absolute;
top: 20px;
background-color: #336699;
z-index: 999; }
nav ul ul li {
min-width: 300px;
text-align:left;
font-size: 0.938em; } /*15px*/
nav ul ul li a {
min-width: 300px; }
nav ul li:hover > ul {
display: block; }
nav select {
display: none;
padding:0.625em; /*10px increases size of select tag */
font-size:1.250em; } /*20px increases font size in select tag */
a:link, a:visited {color: #336699;
font-weight: normal;
background: transparent;
text-decoration: none;
font-weight:normal;
font-size: 0.875em; } /*14px*/
a:hover, a:active {color:#FFCC33;
font-weight: normal;
background: transparent;
text-decoration: underline;
font-weight:normal;
font-size: 0.875em; } /*14px*/
