I'm working on a simple HTML site and having trouble with the navigation not rendering correctly in Chrome and Safari but is fine in Firefox (all on Mac).
The nav li's should each be block开发者_开发技巧s with 15px of padding, floated left next to each other, showing a light green background on hover. In Chrome and Safari, they're just showing up with the page default link styles with no float.
The site can be seen here: http://www.rjlacount.com/clients/GreenTree
Thanks for any help!
And here's the CSS I'm using for the nav menu:
ul#nav {
font-size:16px;
border-top:1px solid #a4a4a4;
border-bottom:1px solid #a4a4a4;
text-align:center;
margin:40px auto;
list-style:none;
}
ul#nav li a:link, ul#nav li a:visited {
float:left;
padding:15px 43px;
text-decoration:none;
font-weight:normal;
color:#000;
}
ul#nav li a:active, ul#nav li a:hover {
background:#e6ffdc;
text-decoration:none;
}
ul#nav li.highlight a:link, ul#nav li.highlight a:visited {
background:#e6ffdc;
}
Looking at your source, it seems to be a problem in your markup. The <a>
tags should be inside the <li>
tags, this seems to be automatically done on firefox, but not in webkit.
In your CSS that you have provided, you are also searching for any anchors within a list item, so it wouldn't be able to find it anyway, as you have them the wrong way around.
精彩评论