El submenú con índice z no quiere repasar el contenido
Por alguna razón desconocida, el índice z no parece funcionar. Intento hacer el submenú. es decir, la segunda barra. Para repasar el #contenido que no logra hacer....
HTML
<html>
<head>
<title>Мэрия Skrillax-RP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="master.css" />
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=cyrillic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="master.js"></script>
</head>
<body>
<div id="wrapper">
<div id="banner"><img src="http://i.imgur.com/f2EWgQP.png?1"><p id="banner text"></div>
<ul id="navigation">
<li><a href="#">Главная Страница</a></li>
<li><a href="#">Задачи</a>
<ul class="submenu">
<li><a href="">Охрана</a></li>
<li><a href="">Министерство Обороны</a></li>
<li><a href="">Министерство Юстиций</a></li>
<li><a href="">Министерство Культуры</a></li>
<li><a href="">Министрество</a></li>
</ul>
</li>
<li><a href="#">Список Сотрудников</a>
<ul class="submenu">
<li><a href="">Hello</a></li>
<li><a href="">Hello2</a></li>
</ul>
</li>
<li><a href="#">Вакансии</a></li>
<li><a href="#">Авторизация</a></li>
</ul>
<div id="content">
<p>Hello! Welcome to the www.mayor.freeiz.com!<br><br> Currently I am working on adding different types of information</p>
</div>
</div>
<div id="footer">Hello</div>
</body>
</html>
CO
html { altura :; } cuerpo { imagen de fondo: url("http://www.gtagaming.com/images/potd/200604/10501.jpg"); archivo adjunto de fondo: fijo; tamaño de fondo: 100% 100%; altura: 100%; } #envoltorio { ancho:1024px; min-altura: 100%; margen: 0 automático; } #banner { altura:216px; } #navegación { posición:relativa; tipo-estilo-lista:ninguno; tamaño de fuente: 18px; color de fondo: naranja; familia tipográfica: 'EB Garamond', serif; opacidad: 0.8; índice z: 15000001; } #navegación>li { float:izquierda; } #navegación a { display:block; relleno: 10px 10px; color blanco; fuente-peso: negrita; ancho: 183.81px; altura: 40px; alineación de texto: centro; color de fondo: azul; borde izquierdo: 1px negro sólido; texto-decoración: ninguno; } #navegación a:hover { color de fondo:blanco; color azul; borde superior: 3px rojo sólido; opacidad: 0.9999; margen inferior: -3px; } #banner h1 { tamaño de fuente: 20px; alineación de texto: centro; posición: relativa; arriba: 1024px; } #contenido { posición:relativa; altura: 500px; color de fondo: blanco; opacidad: 0.9; Limpia los dos; índice z: 1; } #contenido p{ posición:relativa; arriba: 6px; tamaño de fuente: 30px; índice z: 1; } #pie de página { vertical-align: bottom; color de fondo: naranja; ancho: 1024px; altura: 50px; margen: 0 automático; } .submenu { mostrar: ninguno; posición: relativa; } .submenu li { borde superior: 2px negro sólido; } #navegación li:hover .submenu { display:block; índice z:99999999999999999999999999999999999999; }
preguntado el 01 de abril de 13 a las 02:04
user2227581
2 Respuestas
en lugar de relative posición en tu .submenu utilizan el absolute posición
css
.submenu {
display:none;
position:absolute;
}
trabajando manifestación
Respondido 01 Abr '13, 02:04
El posicionamiento relativo no saca el elemento del flujo normal del documento. En consecuencia, cuando aparece ocupa espacio como una normal div y empuja hacia abajo todo lo que hay debajo.
Para eliminarlo del flujo de documentos normal para que solo se asiente encima de todo, use position: absolute. En este caso, lo que queremos que esté encima de todo es el submenú, así que aplíquelo a .submenu.
Respondido 01 Abr '13, 02:04
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas html css navigation or haz tu propia pregunta.