The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Links on list items or anchors?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #33715

    Since HTML 5 and CSS 3 allows us to put links on list items, or indeed, around any number of items, and we can change the hover state oh the list item, should we consider putting links around list items now, instead of on the text?

    For example, I created a simple unordered list and applies this CSS to it:

    * { margin:0; padding:0; }
    ul {
    list-style-type: none;
    margin: 20px 0 0 20px;
    ul li {
    padding: 15px 30px;
    text-decoration: none;
    color: #000;
    margin-right: 2px;

    ul a {
    text-decoration: none;
    ul li:hover {
    background-color: #F9F;

    It works just as well as when a link, padding, and all the rest is applied to the text. Does anyone know which browsers this would be compatible with? It is with the current Safari and Firefox. Any reason not to style a navigation list this way?


    I’m not really sure what you’re asking. It sounds like you’re trying to do this:

    Which will not validate, even under HTML5.


    I think what he means is that he wishes to put the styling onto the list items themselves instead of on the links. not put the list within the link


    @furrball1383 I read it as @TheDoc did, and he is correct; it won’t validate and it isn’t semantic.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.