O meu codigo funcionou sem eu utilizar o display:none, mas nao entendi como. O que aconteceu?
HTML
<section class="secao-inicio blog">
<h2>Blog</h2>
<small>Últimos posts</small>
<ol>
<li>
<a href="blog.html">O essencial de design responsivo</a>
<p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
</li>
<li>
<a href="blog.html">Por que fazer páginas acessíveis?</a>
<p class="inicio-post">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum nobis eaque magnam molestias quae animi obcaecati ullam alias nisi. At, accusamus quaerat fugit excepturi accusantium omnis vero? Praesentium, quidem nobis.</p>
</li>
<li>
<a href="blog.html">JavaScript não obstrusivo</a>
<p class="inicio-post">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam corrupti minima culpa voluptatem iusto, ut debitis laboriosam, aliquam, unde veniam voluptates. Nostrum, maxime id ducimus quod labore vero sunt necessitatibus.</p>
</li>
</ol>
<a class="botao-index" href="blog.html">Veja mais</a>
</section>CSS
/* post recente */
.blog li:hover {
position: relative;
background-color: #fff;
display: inline-block;
width: 50ch;
height: 1rem;
}
.blog a:hover,
.blog a:focus {
background-color: #F2FFFC;
color: #F26;
}
.inicio-post {
width: 60ch;
height: 9rem;
position: absolute;
background-color: #fff;
color: #000;
top: -200%;
left: 100%;
padding: 2rem;
box-sizing: border-box;
}