Problem in tabs menu

Question

The problem is this: The user clicks on the menu it opens normally, only when the user will interact with it, it closes but could only close if clicked on the menu referred to or out of it.

<div class="navegacao">
    <span class="nav-um" tabindex="1">X</span>
    <span class="nav-dois" tabindex="1">Y</span>
    <span class="nav-tres" tabindex="1">Z</span>
    <div class="conteudo">
        <div class="conteudo-um same">Conteúdo do elemento UM</div>
        <div class="conteudo-dois same">Conteúdo do elemento DOIS</div>
        <div class="conteudo-tres same">Conteúdo do elemento TRÊS</div>
    </div>
</div>

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}

.navegacao {
    background-color: #fff;
    border-bottom: 1px solid #eee;
}
.navegacao span {
    display: inline-block;
    padding: 16px;
    outline: 0;
    cursor: pointer;
}

.navegacao span:hover,
.navegacao span:active,
.navegacao span:focus {
    background-color: #eee;
}
.nav-um:focus ~ .conteudo .conteudo-um,
.nav-um:active ~ .conteudo .conteudo-um {
    display: block;
}
.nav-dois:focus ~ .conteudo .conteudo-dois,
.nav-dois:active ~ .conteudo .conteudo-dois {
    display: block;
}
.nav-tres:focus ~ .conteudo .conteudo-tres,
.nav-tres:active ~ .conteudo .conteudo-tres {
    display: block;
}

.conteudo {
    position: absolute;
    top: 50px;
}
.same {
    display:none;
    background-color: #eee;
    padding: 10px;
}