How to hover the current li in nested ul and highlight this and parent entries?

Question

unfortunately, I am stucking with an easy one but my CSS experience aren't that good. Would like to understand how I can rid of the problem.

I am using a CSS tree structure project to display group nesting. This is working pretty good.

Now, I would like to highlight the complete path if hovering above a "code"-element. Now, only the active "code"-element will be highlighted but not the parent objects as this is the case with the bold font.

example

Affected CSS part:

[..]

code:hover {
    background-color: lightgray;
}
li:hover {
    font-weight: bold;    
}
li:hover ul {
    background-color: white;
    font-weight: normal;
}

[..]

body {
  font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif;
  font-size: 14px;
}

/* It's supposed to look like a tree diagram */
.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}
.tree, .tree ul {
    display: table;
}
.tree ul {
  width: 100%;
}
    .tree li {
        display: table-cell;
        padding: .5em 0;
        vertical-align: top;
    }
        
        /* _________ */
        .tree li:before {
            outline: solid 1px #666;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .tree li:first-child:before {left: 50%;}
        .tree li:last-child:before {right: 50%;}

        .tree code, .tree span {
            border: solid .1em #666;
            border-radius: .2em;
            display: inline-block;
            margin: 0 .2em .5em;
            padding: .2em .5em;
            position: relative;
        }
        /* If the tree represents DOM structure */
        .tree code {
            font-family: monaco, Consolas, 'Lucida Console', monospace;
        }

            /* | */
            .tree ul:before,
            .tree code:before,
            .tree span:before {
                outline: solid 1px #666;
                content: "";
                height: .5em;
                left: 50%;
                position: absolute;
            }
            .tree ul:before {
                top: -.5em;
            }
            .tree code:before,
            .tree span:before {
                top: -.55em;
            }
            
code:hover {
    background-color: lightgray;
}
li:hover {
    font-weight: bold;    
}
li:hover ul {
    background-color: white;
    font-weight: normal;
}

/* The root node doesn't connect upwards */
.tree > li {margin-top: 0;}
    .tree > li:before,
    .tree > li:after,
    .tree > li > code:before,
    .tree > li > span:before {
      outline: none;
    }

<figure>
    <figcaption>Example</figcaption>
    <ul class="tree">
        <li><code>Group_1</code>
            <ul>
                <li>
                    <code>Group_1_1</code>
                </li>
                <li>
                    <code>Group_1_2</code>
                    <ul>
                        <li>
                            <code>Group_1_2_1</code>
                            <ul>
                                <li>
                                    <code>Group_1_2_1_1</code>
                                </li>
                                <li>
                                    <code>Group_1_2_1_2</code>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <code>Group_1_2_2</code>
                        </li>
                    </ul>   
                </li>
                <li>
                    <code>Group_1_3</code>
                    <ul>
                        <li>
                            <code>Group_1_3_1</code>
                        </li>
                    </ul>
                </li>
                <li>
                    <code>Group_1_4</code>
                    <ul>
                        <li>
                            <code>Group_1_4_1</code>
                        </li>
                        <li>
                            <code>Group_1_4_2</code>
                            <ul>
                                <li>
                                    <code>Group_1_4_2_1</code>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <code>Group_1_4_3</code>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</figure>

How can I highlight also the parent "li" element?