Jquery 将鼠标悬停在另一项上时显示选定的菜单项而不重叠

我正在做两级垂直菜单。第二级菜单项是单选按钮+标签，使用CSS进行自定义，以仅将标签显示为div

然后，我想在鼠标离开菜单时显示选中的单选按钮项。我这样做了，但现在当选中一个收音机并且我想选择另一个子菜单项时，选中的项位于其他子菜单项之上

这是我的代码，但请在小提琴演示中看得更好

我的HTML

<div id="menu_tipo">
    
    <div class="menu_item" id="menu_item_0">
        
        <div class="title_item">
            <img class="pin_menu" src="{{asset('assets/pin.png')}}" alt="">
            <span class="menu_span">Element 1</span>
            <img class="icono_menu" src="{{asset('assets/nextopen.png')}}" alt="">
        </div>
                
        <div class="menu_radios" id="menu_radios">
            <div class="menu_radios_item" id="item_entrada">
                <input name="tipo" value="entrada" id="dest_entrada" type="radio">
                <label class="radio" for="dest_entrada">
                    <img class="pin_menu" src="{{asset('assets/star.png')}}" alt="">
                    1.1
                </label>
            </div>
            <div class="menu_radios_item" id="item_articulo">
                <input name="tipo" value="articulo" id="art_entrada" type="radio">
                <label class="radio" for="art_entrada">
                    <img class="pin_menu" src="{{asset('assets/images.png')}}" alt="">
                    1.2
                </label>
            </div>
        </div>
                
    </div>
    <div class="menu_item" id="menu_item_1">
        
        <div class="title_item">
            <img class="pin_menu" src="{{asset('assets/pin.png')}}" alt="">
            <span class="menu_span">Element 2</span>
            <img class="icono_menu" src="{{asset('assets/nextopen.png')}}" alt="">
        </div>
                
        <div class="menu_radios" id="menu_radios">
            <div class="menu_radios_item" id="item_entrada">
                <input name="tipo" value="juego" id="dest_juego" type="radio">
                <label class="radio" for="dest_juego">
                    <img class="pin_menu" src="{{asset('assets/star.png')}}" alt="">
                    2.1
                </label>
            </div>
            <div class="menu_radios_item" id="item_articulo">
                <input name="tipo" value="portada" id="portada_juego" type="radio">
                <label class="radio" for="portada_juego">
                    <img class="pin_menu" src="{{asset('assets/images.png')}}" alt="">
                    2.2
                </label>
            </div>
        </div>
    </div>      
</div>

请参见一个示例：

• 选择演示的“2.1”元素
• 选中“2.1”后，尝试选择“1.2”元素

我怎样才能解决这个问题？我需要以下步骤：

当鼠标离开菜单时，将显示选中项

当鼠标悬停在菜单上时，除非选中项拥有悬停项，否则不会显示选中项

我正在尝试做的示例： 我选择了“2.1”。当我退出菜单时，显示“2.1”。当我超过“元素1”时，“2.1”不显示。当我超过“元素2”时，将显示“2.1”

我希望我解释得很好。谢谢你的帮助

#menu_tipo{ height: auto;}

.menu_item{
    background-color: black;
    width: 180px;
    height: 34px;
    position: relative;
}
.menu_item:hover{
    background-color: #45BBE6;
    cursor: default;
}
.title_item{ width: 100%; overflow: hidden; }
.menu_span{height: 34px;float: left;line-height: 34px;color: white;}
.icono_menu{margin: 5px 0px 5px 0px;height: 24px;width: auto;float: right;}
.pin_menu{margin: 5px 15px 5px 5px;height: 24px;float: left;width: auto;}

.menu_item:hover .menu_radios_item label{cursor: pointer; display: block;}
.menu_radios{
    position: absolute;
    left: 180px;
    top: 0px;
    display: block;
}
.menu_radios_item{
    background-color: #0F0F0F;
}
.menu_radios_item label{
    background-color: #0F0F0F;
    display: none;
    width: 300px;
    height: 34px;
    line-height: 34px;
    color: white;
    cursor: pointer;
}
.menu_radios_item label:hover{ background-color: #45BBE6; }
.menu_radios input[type=radio]{ display: none; }
.menu_radios input[type=radio]:checked + .radio{ background-color: orange; display: block;}
//.menu_item:hover .menu_radios input[type=radio]:checked + .radio{display: none;}