menu css

[Medivh]

Estou tentando criar um menu mas, ele chega até certa parte e não altera mais nada ficando somente até isso http://imgur.com/a/2MW5k, queria que me dissessem o que está errado.

 

Abaixo o código

notepad++

/* Cabeçalho */

header {
	height: 55px;
	background-color: #eae9e9;
	box-shadow: 2px 4px 3px #778899;
	position: fixed;
	top: 0;
    left: 0;
	width: 100%;
}

#logo {
	margin-left: 5px;
	float: left;
	padding-top: 8px;
}

.menu {
	margin: none;
	list-style: none;
	float: right;
	font-style: normal;
}

.menu li {
	position: relative;
	float: left;
	margin: 18px 10px 10px;
}

.menu li a {
	color: #00bfff;
	padding: 5px 10px;
	display: block;
}

.menu li a:hover {
	background: #fff;
	text-shadow: 0 0 5px #fff;
}

.menu li ul {
	position: absolute;
	top: 25px;
	left: 0;
	background-color: black;
	padding: 0;
	box-shadow: 3px 3px 6px #001d44;
	z-index: 10;
	display: none;
	border: solid 1px #3e3e3f;
}

.menu li ul li:hover {
	margin: 0;
}

.menu li:hover ul {
	display:block;
}

 

[Frederico15]

Te aconselho um menu em JQuery, você pode fazer toda parte do estilo em CSS, mas a parte da animação fica legal em JQuery.

adicionado 11 minutos depois

Mas se quiser você deveria tentar esconder o menu antes de colocar para aparecer, senão não vai mudar nada, ele está lá, e depois você vai mandar ele aparecer mesmo ele já estando.

[Medivh]

Agora como fazer o submenu ficar abaixo quando passar o mouse em cima, eu dei uma modificada mas ainda sim não consigo fazer isso.

 

Essa parte esta me dando dor de cabeça, necessito de uma luz no fim do tunel ...

 

HTML menu e sub. 

<nav class="menu">
				<ul>
					<li><a href="index.html">HOME</a></li>
					<li><a href="sobre.html">SOBRE</a></li>
					<li class="menu"><a href="eventos.html">EVENTOS</a></li>
						<ul class="sub-menu">
							<li><a href="evento_festivais">FESTIVAIS</a></li>
							<li><a href="evento_shows">SHOWS</a></li>
							<li><a href="evento_workshops">WORKSHOPS</a></li>
						</ul>
					</li>
					<li><a href="contato.html">CONTATO</a></li>
				</ul>
			</nav>

 

CSS na parte do menu e sub

.menu {
	margin: none;
	float: right;
	font-style: normal;
	display: block;
	color: blue;
}


.menu li {
	list-style-type:none;/* isso tira os marcadores da lisa */
	position: relative;
	float: left;
	margin: 18px 10px 10px;
}



.sub-menu {
	position: absolute;
	display: none;
	right: 0;
}

.menu li :hover .sub-menu {
    display:block ;
}

.menu li a:hover {
	background: #fff;
	text-shadow: 0 0 5px #fff;
	display: none;
}

.menu:hover .sub-menu{
    display: block;
}

 

[DYS]

Tenta colocar:

.menu {
	margin: 0;
	float: right;
	font-style: normal;
	display: block;
	color: blue;
	top:0px;
	left:0px;
	width:100%;
}

<style>
*{
	margin:0px;
}
.mae {
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
	min-width:450px;
}
.menu {
	background-color:rgb(180,180,180);
	margin: 0;
	font-style: normal;
	display: block;
	color: blue;
	top:0px;
	right:0px;
	width:100%;
	min-height:60px;
}
.blocolink{
	position:relative;
	float:right;
	width:400px;
	min-width:300px;
}
.menu li{
	display:inline;
	text-decoration:none;
	position:relative;
}
.btn{
	text-decoration:none;
	background-color:rgb(230,230,230);
	border:5px;
	margin-right:50px;
	padding:10px;
	margin-top:10px;
	color:black;
}
.dropbtn{
	cursor:pointer;
}
.dropdown{
	position:relative;
	display:inline-block;
}
.dropdown-content{
	display:none;
	position:absolute;
	background-color:blue;
	min-width:160px;
	z-index:1;
}
.dropdown-content a{
	border:solid;
	border-top:0.2px;
	color:white;
	text-decoration:none;
	padding:12px 16px;
	display:block;
}
.dropdown-content a:hover{
	background-color:black;
}
.dropdown:hover .dropdown-content{
	display:block;
}
.dropdown:hover .dropbtn{
	background-color:;
}
</style>
<div class="mae">
	<header>
		<nav class="menu">
			<ul class="blocolink">
				<li><a class="btn" href="index.html">HOME</a></li>
				<li><a class="btn" href="sobre.html">SOBRE</a></li>
				<li class="links">
					<div class="dropdown">
						<button class="btn dropbtn">EVENTOS</button>
						<div class="dropdown-content">
							<a href="evento_festivais">FESTIVAIS</a>
							<a href="evento_shows">SHOWS</a>
							<a href="evento_workshops">WORKSHOPS</a>
						</div>
					</div>
				</li>
			</ul>
		</nav>
	</header>
</div>

Deixei ele minimamente responsivo e utilizei códigos da W3C para criar a dropdown, acho que a partir dai você já consegue montar o resto. Pode ter sujeira, porque fiz com pressa, preciso terminar meu projeto também, kkkkkk...

Recomendo criar um arquivo CSS e começar a usar alguma IDE, ajudam bastante a organizar os arquivos. 

[Medivh]

@DYS Cara muito obrigado, estou começando agora do jeito que foi ensinado no curso não estava dando certo, pelo menos nessa parte do menu.

 

Eu vou dar uma estudada nisso que tu me passou, valeu mesmo...

 

Em 2017-6-24 às 16:56, DYS disse:

Recomendo criar um arquivo CSS e começar a usar alguma IDE, ajudam bastante a organizar os arquivos. 

Qual você recomenda usar?

[DYS]

@Medivh Quando vou usar eu uso NetBeans e RJ TextED. Uma dica que dou é utilizar temas mais escuros, cinza/preto, são muito bons para descansar um pouco os olhos.