I have a vertical list of items. I'd like each one to change colors when the mouse hovers over them, like on a navbar. If the user clicks then I'd like to have new data appear below the item that was just clicked on. I was trying to do this with style.display attributes but I'm not sure if that's right (I'm new to CSS). Here's an example:

List item 1
List item 2
List item 3

When the user clicks on List item 2, new data will appear between item 2 and 3 with the result being this:

List item 1
List item 2
new data has appeared here
List item 3

If the user then clicks on List item 2 again, it will hide the new data (so clicking on List item 2 toggles the "new data" visible/invisible.

The actual list will have about 25 items in it. And it's possible to click and open more than one at a time. ie if you click on item 2 and then item 6 then the 'new data 2' and 'new data 6' will both be visible at the same time.

Can someone show me a few lines of code that will do this in a cross-browser compatible way?

Thanks!

First of all, you can't do all that you want with just css - you need some javascript. All you can do with CSS is change the colors of the links. You'll need something like this to change the color on hover:

#nav li a:hover{color: red;}

If you want that color to stay red, to indicate they're on that item, you'll need to add a class to the link:

#nav li a:hover.selected{color: red;}
with <a class="selected" href.........>list2</a>