Olá pessoal. Estou começando a poucos dias o curso de HTML, CSS e Java desta apostila da Caelum: https://www.caelum.com.br/download/caelum-html-css-javascript-php.pdf.
Porém me deparei com uma dificuldade no exercício que começa na pagina 61. Ao final do exercício, meu resultado não ficou igual ao exemplo, fazendo com que as listas do menu departamentos continuassem com os símbolos de tópicos. Alguém consegue me dar um help sobre o que pode estar faltando no código?
Aqui está meu código e logo após o estilo CSS:
<div class="container destaque">
<section class="busca">
<h2>Busca</h2>
<form>
<input type="search" >
<input type="image" src="img/busca.png">
</form>
</section><!-- fim .busca -->
<section class="menu-departamentos">
<h2>Departamentos</h2>
<nav>
<ul>
<li><a href="#">Blusas e Camisas</a></li>
<li><a href="#">Calças</a></li>
<li><a href="#">Saias</a></li>
<li><a href="#">Vestidos</a></li>
<li><a href="#">Sapatos</a></li>
<li><a href="#">Bolsas e Carteiras</a></li>
<li><a href="#">Acessórios</a></li>
</ul>
</nav>
</section><!-- fim .menu-departamentos -->
<img src="img/destaque-home.png" alt="Promoção: Big City Night">
</div><!-- fim .container .destaque -->
CSS
.busca,
.menu-departamentos {
background-color: #dcdcdc;
font-weight: bold;
text-transform: uppercase;
margin-right: 10px;
width: 230px;
float: left;
}
.menu-departamentos {
clear: left;
margin-top: 10px;
padding-bottom: 10px;
}
.busca h2,
.busca form,
.menu-departamentos h2 {
margin: 10px;
font-size: 20px;
}
.menu-departamentos li {
background-color: white;
margin-bottom: 1px;
padding: 5px 10px;
}
.menu-departamentos a {
color: #333333;
text-decoration: none;
}
.busca input {
vertical-align: middle;
}
.busca input[type=search] {
width: 170px;
}
.destaque {
margin-top: 10px;
}