Hi, I’m trying to make an unordered list of links with image bullet points, I want it so that when you mouse over a link it changes the bullet point to a different image. I’ve got this far without any problems however if I put something in my unordered list that is not a link it doesn’t display any bullet point. Here is the code I am using:
- Code: Select all
<html>
<head>
<style type="text/css">
ul.sidelist {
list-style:none;
}
.sidelist li a {
background:url('bullet.png') no-repeat center left;
padding-left:10px;
}
.sidelist li a:hover {
background:url('bullet2.png') no-repeat center left;
}
</style>
</head>
<body>
<ul class="sidelist">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li>Without Link</a></li>
</ul>
</body>
</html>
If I try adding the following code I get two bullet points on links and one on non-links:
- Code: Select all
.sidelist li {
background:url('bullet.png') no-repeat center left;
}