Display selected menu item without superimpose when hover another item

I'm doing a 2 levels vertical menu. The second level menu items are radio buttons + labels, customized with CSS to only show the label like a div.

Then, I want to show the checked radio button item when the mouse is out of the menu. I do it, but now when a radio is checked and I want to select another submenu item, the checked item is over other submenu items.

My 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>

My CSS

#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;}

Fiddle demo

See an example:

• Select the "2.1" element of the demo.


• With "2.1" checked, try to select the "1.2" element.

How can I solve this? I want the follow steps:

1. When mouse out of the menu, checked item displayed.


2. When mouse over the menu, checked item not displayed EXCEPT if the checked item owns to hovered item.

Example of what I'm trying to do: I selected "2.1". When I'm out of the menu, "2.1" displayed. When I'm over "Element 1", "2.1" not displayed. When I'm over "Element 2", "2.1" displayed.

I hope I explained well. Thanks for any help!