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?
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;
}
Remove the last comma in the selector after a:visited:hover, I think thats whats scrwing it up
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.