index doesn't want to go over content
For some unknown reason z-index doesn't seem to work. I try to make the submenu. ie the 2nd bar. To go over the #content which it fails to do....
http://jsfiddle.net/PaD2v/
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>
CSS
html {
height:;
}
body {
background-image: url("http://www.gtagaming.com/images/potd/200604/10501.jpg");
background-attachment: fixed;
background-size: 100% 100%;
height:100%;
}
#wrapper {
width:1024px;
min-height: 100%;
margin:0 auto;
}
#banner {
height:216px;
}
#navigation {
position:relative;
list-style-type:none;
font-size: 18px;
background-color: orange;
font-family: 'EB Garamond', serif;
opacity:0.8;
z-index: 15000001;
}
#navigation>li {
float:left;
}
#navigation a {
display:block;
padding:10px 10px;
color:white;
font-weight: bold;
width:183.81px;
height:40px;
text-align: center;
background-color: blue;
border-left:1px solid black;
text-decoration:none;
}
#navigation a:hover {
background-color:white;
color:blue;
border-top:3px solid red;
opacity:0.9999;
margin-bottom: -3px;
}
#banner h1 {
font-size: 20px;
text-align: center;
position: relative;
top: 1024px;
}
#content {
position:relative;
height:500px;
background-color:white;
opacity:0.9;
clear: both;
z-index:1;
}
#content p{
position:relative;
top:6px;
font-size: 30px;
z-index:1;
}
#footer {
vertical-align: bottom;
background-color: orange;
width:1024px;
height:50px;
margin:0 auto;
}
.submenu {
display:none;
position:relative;
}
.submenu li {
border-top: 2px solid black;
}
#navigation li:hover .submenu {
display:block;
z-index:99999999999999999999999999999999999999;
}
instead of relative position in your .submenu use absolute position
css
.submenu {
display:none;
position:absolute;
}
working demo
Relative positioning doesn't take the element out of the normal document flow. Consequently, when it appears it takes up space like a normal div and pushes everything beneath it down.
To remove it from the normal document flow so that it just sits on top of everything, use position: absolute . In this case, the thing we want to sit on top of everything is the submenu, so apply it to .submenu .
上一篇: 如何在不操纵HTML的情况下摆脱跨度之间的空白区域？
下一篇: 索引不希望浏览内容