UL LI で入れ子にしたときに内側と外側でCSSの影響を切り分けたい

前提

htmlとcssでWebサイトのメガメニューを作成しています。

実現したいこと

常時表示されている横並びの親メニューと
親メニューにマウスオーバーした時に表示される子メニューがあり

親メニューごとに子メニューのレイアウトを変えたい

発生している問題・エラーメッセージ

親メニューと子メニューでそれぞれ UL LI の入れ子にしているため
親メニューのCSSが子メニューの UL LI に影響してしまう。

該当のソースコード

一部ですが

html

<nav class="header_nav-wrap"> <ul class="header_nav"> <li><a href="#">親メニュー1</a> <div class="child_menu-wrap"> <div class="child_menu"> <div class="megamenu-content"> <ul class="megamenu-item01"> <li> <a href="#"><img src="#" alt="子メニュー1の画像" width="600" height="300"> <p>子メニュー1</p> </a> </li> <li> <a href="#"><img src="#" alt="子メニュー2の画像" width="600" height="300"> <p>子メニュー2</p> </a> </li> <li><a href="#">親メニュー2</a> <div class="child_menu-wrap"> <div class="child_menu"> <div class="megamenu-content"> <ul class="megamenu-item02"> <li> <a href="#"><img src="#" alt="子メニュー1の画像" width="600" height="300"> <p>子メニュー1</p> </a> </li> <li> <a href="#"><img src="#" alt="子メニュー2の画像" width="600" height="300"> <p>子メニュー2</p> </a> </li>

試したこと

直下セレクタを使ってみました

css

.header_nav > li 親メニューの装飾 .megamenu-item01 > li 子メニューの装飾

とそれぞれ分けてみたのですがダメでした。

「継承」について理解できていないのかも知れません。
こういうときの回避策はあるのでしょうか