Menu Dropdown

Gabriel42 · Abril 28, 2017

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>

Giovani · Abril 28, 2017

18 minutos atrás, Gabriel42 disse:

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.

Diga onde está o problema e o que você já fez para tentar arrumar.