Menu Dropdown
Bom pessoal estou com muita dúvida em menu Dropdown e não é de hoje!
Já vi inúmeras vídeo-aulas, tutoriais mais simplesmente não consigo entender
Estou desenvolvendo um projeto pra adquirir mais experiencia:
O menu já esta pronto como podem ver na imagem no link acima mais não consigo
arrumar o menu dropdown se vocês poderem me ajudar agradeço.
CSS
/ RESET /
* {margin: 0; padding: 0; font-size: 100%; font-family: 'Open Sans', sans-serif; font-weight: normal; box-sizing: border-box; border: none;
outline: none;}
img {max-width: 100%;}
ul {list-style: none;}
a {text-decoration: none;}
/ MENU ATENDIMENTO /
.menu-atendimento {position: relative; width: 100%; height: 40px; background-color: #282828; font-size: 1em; font-weight: 300;}
.menu-atendimento h2 {position: relative; float: left; padding-left: 90px; padding-top: 10px; color: #0294c4; cursor: default;}
.menu-atendimento ul li {position: relative; float: right; padding-right: 100px; padding-top: 10px;}
.menu-atendimento ul li a {color: #0294c4;}
.menu-atendimento ul li a:hover{color: #f3f3f3;}
/ CABECALHO /
.cabecalho {position: fixed; width: 100%; height: 58px; background-color: #f1f1f1;}
.logo-marca {width: 48px; height: 31px; float: left; margin-top: 15px; margin-left: 90px; background-image: url(../img/logo-marca.png);}
.logo-texto {width: 111px; height: 31px; float: left; margin-top: 17px; margin-left: 10px; background-image: url(../img/logo-texto.png);}
/ MENU /
.menu {float: right; white-space: nowrap;}
.menu ul {position: relative;}
.menu ul li {width: 150px; float: right; margin-right: 100px;}
.menu ul li a {display: block; padding-top: 20px; text-align: center; color: #282828; font-size: 1.1em}
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>CopenHost</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="menu-atendimento">
<h2> <i class="fa fa-phone" aria-hidden="true"></i> 0800 6839 7171</h2>
<ul>
<li> <a href="#"> <i class="fa fa-user" aria-hidden="true"></i> Painel do Cliente</a> </li>
<li> <a href="#"> <i class="fa fa-envelope" aria-hidden="true"></i> Webmail</a> </li>
<li> <a href="#"> <i class="fa fa-comments" aria-hidden="true"></i> Atendimento</a> </li>
</ul>
</div>
<header class="cabecalho">
<h1 class="logo-marca"></h1>
<h1 class="logo-texto"></h1>
<nav class="menu">
<ul>
<li> <a href="#">FAQS</a> </li>
<li> <a href="#">Sobre</a> </li>
<li> <a href="#">Produtos <i class="fa fa-caret-down" aria-hidden="true"></i> </a>
<ul>
<li> <a href="#">Hospedagem de Sites</a> </li>
<li> <a href="#">Hospedagem WordPress</a> </li>
<li> <a href="#">Revenda de Hospedagem</a> </li>
<li> <a href="#">Registro de Dominios</a> </li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>Discussão (2)
Carregando comentários...