How can you change attributes of td when you hover over th ?

[half_beard]

First off, I am very new to css. If possible, please explain the css-specific terminology that you use in you reply. I want to make a drop-down menu, like this one, but using a table instead of a list. (The reason I want to use a table is because for the life of me I can not get the drop-down menu [from the link] to be centered horizontally.) I tried this :

th:hover td {
    stuff
}

but nothing happens. Is it possible to have only the table headers displayed initially and when you hover over a th, dislay the td below the respective th ? I don’t want to use any jquery or javascript, only css.

Thanks

[nixnerd]

A table in this situation is probably not semantically correct. Please make a Codepen with what you have.

[Senff]

To add to @Nix’s comment: don’t go for something completely different (like a table) because you can’t solve the original problem (centering with a list).

Centering a list is not too difficult. Here’s an example, perhaps that was what you were looking for: http://codepen.io/senff/pen/vwLGA

[Author]

Posts