Olá, peço gentilmente uma ajuda, eu vi tutoriais de html e css no youtube e comecei a seguir os passos a passos até que consegui criar um site bem "ralézinho" fiz muitas modificações e então minha programação está uma bagunça. Estou tentando a dois dias inserir um submenu no meu menu porém tem muitos codigos que eu n entendo muito bem e no final acaba ficando errado meu submenu. Se alguém puder me ajudar eu sou muito grato. Quero fazer um submenu em "serviços" o html na parte de colocar uma "ul" dentro da "li" eu sei mas preciso de ajuda no css pois tem outras chamadas do mesmo "nav" com outra configuração e n estou conseguindo arrumar :/
body{
font-family: 'Roboto', sans-serif;
color: #333;
}
a:link, a:active, a:visited{
color: #336699;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
/* grid 960px */
.linha{
width: 770px;
margin: 0 auto;
overflow: auto;
padding: 5px 0;
}
.coluna{
padding: 0 10px;
float: left;
}
.col1{
width: 45px;
}
.col2{
width: 109px;
}
.col3{
width: 173px;
}
.col4{
width: 237px;
}
.col5{
width: 301px;
}
.col6{
width: 365px;
}
.col7{
width: 429px;
}
.col8{
width: 493px;
}
.col9{
width: 557px;
}
.col10{
width: 621px;
}
.col11{
width: 685px;
}
.col12{
width: 749px;
}
/* estilos reutilizáveis */
.sem-padding{
padding: 0 !important;
}
.sem-margin{
margin: 0 !important;
}
h1, h2, h3, h4, h5, h6{
font-weight: 500;
margin: 10px 0 10px 0;
}
ul li. ol li{
margin-bottom: 5px
}
ul.inline li, ol.inline li{
display: inline;
margin-right: 15px;
}
ul.inline li:last-chield, ol.inline li:last-chield{
margin-right: 0px;
}
ul.sem-marcador, ol.sem-marcador{
list-style: none;
}
a.botao, input.botao{
background: #1f3c58;
padding: 5px 10px;
border-radius: 3px;
color: #ebebeb;
cursor: pointer;
margin: 5px 0;
display: inline-block;
border: none;
}
a.botao:hover, input.botao:hover{
background: #315e8a;
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
iframe{
max-width: 100%;
}
/* layout do site */
.header{
background: #dee3e6;
}
h1.logo{
font-weight: 300;
color: #333333;
letter-spacing: 0px;
font-size: 17px;
text-align: right;
line-height: 90%;
}
.footer{
background: #336699;
color: #FFFFFF;
padding: 20px 0;
text-align: center;
font-weight: 100;
}
.menu{
text-transform: uppercase;
text-align: right;
margin-top: 20px;
}
.menu li a{
border-radius: 3px;
}
.menu li a:hover{
text-decoration: none;
background: #1f3c58;
color: #ebebeb;
}
ul.topo{
font-weight: bold 300;
text-align: right;
list-style: none;
line-height: 110%;
}
ul.padrão{
font-size: 20px;
line-height: 170%;
}
.contato label{
display: block;
font-size: 13px;
font-weight: 300;
}
.contato input, .contato textarea{
display: block;
margin-bottom: 15px;
padding: 5px 2%;
width: 96%;
}
.contato textarea{
height: 150px;
}
.contato input.botao{
width: auto;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>MR Multiplicidade - Terceirização de Serviços</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>
<body>
<div class="header">
<div class="linha">
<header>
<div class="coluna col4">
<h1 class="logo">
<img src="mult.jpg" alt="" />
<figcaption> Terceirização de Serviços </figcaption>
</h1>
<ul class="topo">
<li><strong>(11) 4376-0163</strong></li>
</ul>
</div>
<div class="coluna col8">
<nav>
<ul class="menu inline sem-marcador">
<li><a href="index.html">home</a></li>
<li><a href="inst.html">institucional</a></li>
<li><a href="servicos.html">serviços</a></li>
<li><a href="contato.html">contato</a></li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<div class="linha">
<section>
<div class="coluna col7">
<h2>Terceirização de Mão de Obra, exercendo as atividades:</h2>
<ul class="padrão">
<li>Portaria</li>
<li>Controlador de acesso</li>
<li>Limpeza</li>
<li>Recepção</li>
<a href="hist.html" target="_self">Historia</a>
</ul>
</div>
<div class="coluna col5">
<img src="servicos.png" alt="">
</div>
</section>
</div>
<div class="footer">
<div class="linha">
<footer>
<div class="coluna col12">
<span>© 2016 - Multiplicidade - Terceirização de Serviços</span>
</div>
</footer>
</div>
</div>
</body>
</html>