Problem with CSS hover on menu dropdown which is inherited properties

Im trying to modify some preexisting CSS that controls a hover drop-down menu. I want to add some sort of indicator on the mouse over to indicate that you are hovering over a hot zone. maybe a shadow or something to be determined. For testing I thought I would just change the alpha of the zone.

The menu list visibility is controlled by the inheritance of the main menu, so when I change the opacity of the menu item to indicate a hover it is changing the dropdown list as well.

“.settings” is the main menu, “s#ettingslist” is the dropdown

My CSS looks like this

#settingslist {display:none;right:23px;top:22px;position:absolute;z-index:10;background-color:grey;}
.settings {float:right;line-height:99%;margin: -3px 8px 0 0;}
.settings:hover > #settingslist {display:inherit;}
.settings:hover {opacity, .5};

Wecome to the forums!

Please click the following link and read our posting guidelines (at least the first two posts) for information about the best way to present your issue.

CSS alone is rarely useful. Inline CSS is difficult to read; indented properties are easier to read and interpret. Since CSS works together with HTML, we usually need to see the HTML, too. Since we have never seen your design intent or your code before, the more relevant code you show us and the better you explain the issue, the better and faster we can help you.

The above line is invalid. Had you tested the code before posting it, it would have failed validation. We strongly recommend that you test your code in a working page before posting it here. It’s always helpful if we can see what you see.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.