Problem with CSS hover on menu dropdown which is inherited properties

[za2754078]

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};

[ronpat]

@za2754078

Im trying to modify some preexisting CSS

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.

Forum Posting Basics

When posting a coding question, it’s important to help people to help you. Ideally, post a link to a web page that demonstrates the issue. If that’s not possible (for example, if your site is not live yet) there are various other options. You might, for example, create a working example of the problem on a site like CodePen. You can then paste the link to your Pen here. (If you sign up for a free account at CodePen, your Pen will get embedded right here, like this: http://codepen.io/oknoblich/…

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.

@za2754078

.settings:hover {opacity, .5};

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.