Monday 28 April 2014

Change ul and li styling

To change ul and li styling use the following. Usually you try to remove styling from ul then try to float li then if you have a tag try to style them and most of the time you have sprites images to show.

Ul {
list-style:none;
Margine:0;
Padding:0;

}

li {
    float: left;
    margin: 0;
    padding: 0;
}

a {
    font-family: Verdana, sans-serif;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0 15px 0 30px;
    margin-right: 10px;
    line-height: 25px;
    background: url(../images/mySprites.png) -286px -25px;
    border: none;
}

 a:hover {
    color: #f8b449;
    background-position: -286px 0;
}

 a.current {
    margin-top: -5px;
    height: 30px;
    background-position: -86px 0px ;
    color: #aaa;
    line-height: 25px;
}

 a.current:hover {
    cursor: default;
}

No comments:

Post a Comment