Make unordered list bullet appear on hover

[hbadorties]

Hello CSS gurus,

I want to make an unordered list without any bullets for a menu.

I want a custom bullet (eg: double chevron) to appear when the mouse hovers over the link.

I am stuck.

Any tips/tricks/pouinters would be most welcome.

[Twey]

Well, this is easy to do for everything else, but not so for IE. IE doesn't support :hover for non-<a> elements, and it doesn't support most of the selectors that would allow us to work around this. Therefore, the only way to do it is to simulate it with Javascript.

<style type="text/css">
ul {
  list-style-type: none;
}

li:hover, li.hovered {
  list-style-image = url(path/to/image.jpg);
}
</style>
<script type="text/javascript">
if(document.all) window.onload = function() {
  var c = document.getElementsByTagName("li");
  for(var i=0;i<c.length;i++) {
    c[i].onmouseover = function() {
      this.className = "hovered";
    };
    c[i].onmouseout = function() {
      this.className = "";
    };
  };
};
</script>