It just does not work, the "li" does not appear.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/* reset do html */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, span,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
html {
position: relative;
min-height: 100%;
}
body {
color: black;
background:#fff url("Scr/fundoClaro.png") repeat;
text-align:center; /* hack para o IE */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333333;
overflow:hidden;
margin: 0 0 60px;
}
div {display:block;}
input {
position:absolute;
display:none
}
label {
position:relative;
z-index:1;
display:inline-block;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding:1px;
padding-top:0;
padding-left:0;
font-size:13px;
line-height:45px;
cursor:pointer
}
label span {
display:block;
padding:5px;
background:rgba(255, 255, 255, .9)
}
label span span {
padding:0 20px;
background:transparent;
transition:background .3s, color .4s;
-o-transition:background .3s, color .4s;
-ms-transition:background .3s, color .4s;
-moz-transition:background .3s, color .4s;
-webkit-transition:background .3s, color .4s
}
label:hover span span {
background:#3498db;
color:#fff
}
input:checked + label span span {
background:#3498db;
color:#fff
}
ul {
list-style:none;
position:relative;
display:block;
font-size:13px
}
ul > li {
opacity:0;
}
.menu > .aba-1:checked ~ .caixa ul .aba-1,
.menu > .aba-1:checked ~ .caixa ul .aba-2,
.menu > .aba-1:checked ~ .caixa ul .aba-3,
.menu > .aba-1:checked ~ .caixa ul .aba-4 {
position:relative;
z-index:1;
opacity:1
}
.conteudo {
width:600px;
position:relative;
line-height:20px
}
.pagina-url {
float:right;
margin-top:15px
}
.topo {
width:1170px;
position:relative;
float:top;
height: 40px;
top:0px;
}
</style>
</head>
<body>
<div class="topo">
<div class="menu">
<input type="radio" name="menu" checked id="aba-inicio" class="aba-inicio">
<label for="aba-inicio"><span><span>Inicio</span></span></label>
<input type="radio" name="menu" id="aba-app" class="aba-app">
<label for="aba-app"><span><span>APP</span></span></label>
<input type="radio" name="menu" id="aba-informacao" class="aba-informacao">
<label for="aba-informacao"><span><span>Informações</span></span></label>
<input type="radio" name="menu" id="aba-contato" class="aba-contato">
<label for="aba-contato"><span><span>Contato</span></span></label>
<input type="radio" name="menu" id="aba-download" class="aba-download">
<label for="aba-download"><span><span class="importante">Baixe agora</span></span></label>
</div>
</div>
<div class="caixa">
<ul>
<li class="aba-1">
<div class="conteudo">
conteudo 1
</div>
</li>
<li class="aba-2">
<div class="conteudo">
conteudo 2
</div>
</li>
<li class="aba-3">
<div class="conteudo">
conteudo 3
</div>
</li>
<li class="aba-4">
<div class="conteudo">
conteudo 4
</div>
</li>
</ul>
</div>
</div>
</body>
</html>