Hi Guys,
Could you help me with this issue?
I created a list with left "dot" icon img.
I created a current class.When the link is correspondent to the current page the left icon will be changed to "heart" icon img.
The current class is working properly, but the heart icon is overlapping the dot icon. I would like to remove the dot icon when the heart icon appears.How to do that?
Thanks
Dungol
This is my sample:
<style>
#menu {
width: 250px;
height: 390px;
}
#menu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#menu ul li {
padding-bottom: 35px;
padding-left: 3px;
}
#menu ul li a {
color: #412b39;
text-decoration: none;
font-size: 18px;
background-image: url(images/dot-icon.png);
background-repeat: no-repeat;
background-position: left center;
display: block;
padding-left: 20px;
}
#menu ul li a:hover {
color: #F9C;
text-decoration: underline;
}
.current {
background-image: url(images/heart-icon.png);
background-repeat: no-repeat;
}
</style>
<body>
<div id="menu">
<ul>
<li class="current"><a href="index.html">sample</a></li>
<li><a href="sample.html">sample1l</a></li>
<li><a href="sample.html">sample2</a></li>
</ul>
</div>
</body>
