How do I make a list clickable? - html

Question

I'm currently working on a pure CSS color palette that needs to be a link. I've created this palette by using an unordered list, which I then wrapped in a <a> tag. I have a suspicion that this is not very semantic though. What would be the correct way to achieve this?
HTML
<div class="color-palette">
Modern Feminine
<a href="#">
<ul class="color-chips group">
<li class="grey">#999999</li>
<li class="slate">#666666</li>
<li class="lilac">#99878D</li>
<li class="blush">#7E4A5C</li>
<li class="plum">#372129</li>
</ul><!--.color-chips group-->
</a>
</div><!--.color-palette-->
CSS
.color-palette {
width: 280px;
margin: 0 auto;
padding: 0;
}
ul.color-chips {
margin: 0 auto;
padding: 0;
}
ul.color-chips li {
float: left;
margin: 0;
}
ul.color-chips li {
float: left;
width: 55px;
height: 55px;
text-indent: -9999px;
}

Answer 1

You can't put a list inside an anchor.
You need to make each of the individual items in the list a seperate link.
<ul class="color-chips group">
<li class="grey">#999999</li>
<li class="slate">#666666</li>
<li class="lilac">#99878D</li>
<li class="blush">#7E4A5C</li>
<li class="plum">#372129</li>
</ul><!--.color-chips group-->
If you don't need links because you're not actually linking to anything (i.e. you're performing on-the-page operations) simply remove the anchors all together. You don't need them when attaching your Javascript onclick events.

Answer 2

<ul class="color-chips group">
<li class="grey">#999999</li>
<li class="slate">#666666</li>
<li class="lilac">#99878D</li>
<li class="blush">#7E4A5C</li>
<li class="plum">#372129</li>
</ul>

Answer 3

What would you like to do after your click? Do you use javascript event when click is fired?

Answer 4

Since you're already handling clicks with JS, I assume the anchor is purely cosmetic. In that case you can use CSS:
.color-chips:hover {
cursor:pointer;
}