Simpel Javascript og css menu

Hej Eksperter

Jeg er i gang med at lave en side hvor jeg har en simpel menu.
Menu'en består af <ul> og <li> punkter. <ul> har list-style-type sat i css til none så den ikke viser prikkerne. Jeg har så lavet en onmouseovereffekt og en onmouseouteffekt som henholdsvis viser prikken og fjerne den når musen fjernes fra det pågældende punkt.
Det jeg ikke kan finde ud af at lave er at når man trykker på et punkt, skal prikken blive der når man onmouseout'er. Når man onmouseover på et andet punkt skal prikken fjernes fra det punkt man klikkede på før og kommer frem på det punkt man nu står på.
Jeg har dette ind til videre:

<script type="text/javascript">
       
    function setBullet(element) {
        document.getElementById(element).style.listStyleType = "disc";
    }
       
    function unsetBullet(element) {
        document.getElementById(element).style.listStyleType = "none";
    }

</script>

<!-- menu -->

<ul>
    <li id="item1"><a href="#"><img src="image1.png" onmouseover="setBullet('item1');" onmouseout="unsetBullet('item1');" /></a></li>
    <li id="item2"><a href="#"><img src="image2.png" onmouseover="setBullet('item2');" onmouseout="unsetBullet('item2');" /></a></li>
    <li id="item3"><a href="#"><img src="image3.png" onmouseover="setBullet('item3');" onmouseout="unsetBullet('item3');" /></a></li>
    <li id="item4"><a href="#"><img src="image4.png" onmouseover="setBullet('item4');" onmouseout="unsetBullet('item4');" /></a></li>

</ul>