4

For some unknown reason z-index doesn't seem to work. I try to make the submenu. i.e. 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;
}

2 Answers 2

3

instead of relative position in your .submenu use absolute position

css

.submenu {
    display:none;
    position:absolute;  
}

working demo

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.