Problems with css, menu does not work

Asked

Viewed 486 times

1

It just doesn’t work, "li".

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>

/* reset do html */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, span,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

html {
	position: relative;
    min-height: 100%;
}

body {
	color: black;
	background:#fff url("Scr/fundoClaro.png") repeat;
	text-align:center; /* hack para o IE */		
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #333333;
	overflow:hidden;
	margin: 0 0 60px;
}

div {display:block;}

input {
	position:absolute;
	display:none
}
label {
	position:relative;
	z-index:1;
	display:inline-block;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:1px;
	padding-top:0;
	padding-left:0;
	font-size:13px;
	line-height:45px;
	cursor:pointer
}
label span {
	display:block;
	padding:5px;
	background:rgba(255, 255, 255, .9)
}
label span span {
	padding:0 20px;
	background:transparent;
 transition:background .3s, color .4s;
 -o-transition:background .3s, color .4s;
 -ms-transition:background .3s, color .4s;
 -moz-transition:background .3s, color .4s;
 -webkit-transition:background .3s, color .4s
}
label:hover span span {
	background:#3498db;
	color:#fff
}
input:checked + label span span {
	background:#3498db;
	color:#fff
}
ul {
	list-style:none;
	position:relative;
	display:block;
	font-size:13px
}
ul > li {
	
	opacity:0;
	
}
.menu > .aba-1:checked ~ .caixa ul .aba-1,
.menu > .aba-1:checked ~ .caixa ul .aba-2,
.menu > .aba-1:checked ~ .caixa ul .aba-3,
.menu > .aba-1:checked ~ .caixa ul .aba-4 {
 position:relative;
 z-index:1;
 opacity:1
}
.conteudo {
	width:600px;
	position:relative;
	line-height:20px
}
.pagina-url {
	float:right;
	margin-top:15px
}
.topo {
	width:1170px;
	position:relative;
	float:top;
	height: 40px;
	top:0px;
}

</style>
</head>
<body>
	<div class="topo">
		<div class="menu">
			<input type="radio" name="menu" checked id="aba-inicio" class="aba-inicio">
							<label for="aba-inicio"><span><span>Inicio</span></span></label>
						<input type="radio" name="menu" id="aba-app" class="aba-app">
							<label for="aba-app"><span><span>APP</span></span></label>
						<input type="radio" name="menu" id="aba-informacao" class="aba-informacao">
							<label for="aba-informacao"><span><span>Informações</span></span></label>
						<input type="radio" name="menu" id="aba-contato" class="aba-contato">
							<label for="aba-contato"><span><span>Contato</span></span></label>
						<input type="radio" name="menu" id="aba-download" class="aba-download">
							<label for="aba-download"><span><span class="importante">Baixe agora</span></span></label> 
		</div>
		
	</div>
	<div class="caixa">
		<ul>
			<li class="aba-1">
				<div class="conteudo">
					conteudo 1
				</div>
			</li>
			<li class="aba-2">
				<div class="conteudo">
					conteudo 2
				</div>
			</li>
			<li class="aba-3">
				<div class="conteudo">
					conteudo 3
				</div>
			</li>
			<li class="aba-4">
				<div class="conteudo">
					conteudo 4
				</div>
			</li>
		</ul>
	</div>
</div>
</body>
</html>

html css

2 answers

1

You have put the opacity (transparency) of <li> as 0. Change to 1 or remove that part of CSS.

ul > li {       
    opacity:0;      
}

0

Hello, it’s not a "problem" in CSS, it’s actually fulfilling exactly what you wrote, as it was set within the statement that the opacity property gets value 0. The value of the opacity property goes from 0 to 1, and can take values like: 0.1, 0.2, ... 0.9, 1. Then it would be enough to change its value from 0 to 1 and the "li’s" would appear again. Ex.:

ul > li {
    opacity: 1;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.