使用 CSS 将链接变成小圆圈

Question

I have the following html code:

<ul class="smenu">
<li class="smenuitem"><a href="http://ux.stackexchange.com/"></a></li>
<li class="smenuitem"><a href="http://area51.stackexchange.com/"></a></li>
<li class="smenuitem"><a href="http://www.webmasters.stackexchange.com/"></a></li>
</ul>

I'm trying to get the links to look like round circles with a width of 25px and a height of 25px, so I applied the following css:

li.smenuitem a, li.smenuitem a:link:hover, li.smenuitem a:visited, li.smenuitem a:visited:hover, {
display: block;
width: 25px;
height: 25px;
border-radius: 25px;
background-color: #0000ff;
}

However, the links did not appear at all. They were not 25px by 25px, and they did not have rounded corners (they weren't in a circular shape). Can anyone tell me what I'm doing wrong?

Answer 1

You have a misplaced comma (see at the very end of the selector list):

li.smenuitem a, li.smenuitem a:link:hover, li.smenuitem a:visited, li.smenuitem a:visited:hover, {

Versus:

li.smenuitem a, li.smenuitem a:link:hover, li.smenuitem a:visited, li.smenuitem a:visited:hover {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background-color: #0000ff;
}

http://jsfiddle.net/J2XTs/

Answer 2

Remove the last comma in the selector after a:visited:hover, I think thats whats scrwing it up