css - 子が上に置かれると、親のメニュー項目が背景を変更します

Question

私は WordPress サイトで作業しています。2 層のディープ メニューを作成すると、子要素にカーソルを合わせると、親要素がデフォルトの青色で強調表示されます。この間に親要素の背景を変更するにはどうすればよいですか?

たとえば、この画像を参照してください

#access .dropdown-menu li:hover > .sub-menu { visibility: visible; } 
#access .dropdown:hover > .dropdown-menu { display: block; } 
#access .dropdown-menu .dropdown-menu { background: rgba(25,25,25,0.8); } 
#access .dropdown-menu .dropdown-menu { left: 100%; top: 0; border-top: none; background: rgba(25,25,25,0.8); } 
#access .dropdown-menu .dropdown-menu li a { color: #fff; text-decoration: none; } 
#access .dropdown-menu .dropdown-menu li a:hover { color: #7ac143; }`

Answer 1

単純化された作業用 jQuery ソリューション:

http://jsbin.com/ojikix/1/edit

Answer 2

li:hover親メニューの代わりにサブメニューの をトリガーします ( .dropdown-menu)。

#access.dropdown-menu > .sub-menu li:hover { visibility: visible; display: block; }