CSS hold parent horizontal menu background
<p>I am designing simple horizontal menu with <code>html/css</code>, see <a href="https://jsfiddle.net/zjzzsqtf/" rel="nofollow noreferrer">jsfiddle.net</a>. The problem is that after hovering on <code>li</code> childrens i can not hold parent <code>li</code> background. See print screens below:</p>

<p><a href="https://i.stack.imgur.com/VQYst.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VQYst.png" alt="enter image description here"></a></p>

<p>in this state, after hover on menu childrens, such as <code>Settings</code> or <code>Applications</code>, i can't hold background of parent block, such as <code>Options</code> :</p>

<p><a href="https://i.stack.imgur.com/4BPlZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4BPlZ.png" alt="enter image description here"></a></p>