If you look at the “shop by category” section of the link below, there are expandable menus displaying the categories. My problem is that the categories are links, so when one is selected, not only is it expanded but the page also reloads. How could I go about separating the bullet from the <li> and <a> elements so that when the bullet is clicked, it will expand the menu and if the actual name is selected, it will go to that category?
There is no real need for Kcup to be a link anyway because when js is disabled the menu is expanded by default. So you could use a span instead of an anchor and just style it to look the same.
A quick fix would be just to remove the href destination.
e.g.
<li class="submenu"><a href="#nogo">KCup</a>
Now when clicked it will not go anywhere. The semantic solution though is to change that anchor to a more suitable element such as a span or perhaps a heading tag of the appropriate level might be more appropriate.
There is probably a JS solution also in making the link when clicked returned false so that it doesn’t follow but that’s a question for the JS forum.