3

由于某些未知原因，z-index 似乎不起作用。我尝试制作子菜单。即第二个酒吧。回顾它未能做到的#content....

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 {
        高度：;
    }
    身体 {
        背景图片：url（“http://www.gtagaming.com/images/potd/200604/10501.jpg”）；
        背景附件：固定；
        背景尺寸：100% 100%；
        高度：100%；
    }
    #包装器{
        宽度：1024px；
        最小高度：100%；
        边距：0 自动；
    }
    ＃横幅 {
        高度：216px；
    }
    ＃导航 {
        位置：相对；
        列表样式类型：无；
        字体大小：18px；
        背景颜色：橙色；
        字体系列：'EB Garamond'，衬线；
        不透明度：0.8；
        z-index：15000001；

    }

    #导航>李{
        向左飘浮;

    }
    #导航一个{
        显示：块；
        填充：10px 10px；
        白颜色;
        字体粗细：粗体；
        宽度：183.81px；
        高度：40px；
        文本对齐：居中；
        背景颜色：蓝色；
        左边框：1px 纯黑色；
        文字装饰：无；
    }
    #navigation a:悬停{
        背景颜色：白色；
        颜色：蓝色；
        边框顶部：3px 纯红色；
        不透明度：0.9999；
        边距底部：-3px；
    }
    #banner h1 {
        字体大小：20px；
        文本对齐：居中；
        位置：相对；
        顶部：1024 像素；
    }
    ＃内容 {
        位置：相对；
        高度：500 像素；
        背景颜色：白色；
        不透明度：0.9；
        明确：两者；
        z-索引：1；
    }

    #内容p{
        位置：相对；
        顶部：6px；
        字体大小：30px；
        z-索引：1；
    }

    #页脚{
        垂直对齐：底部；
        背景颜色：橙色；
        宽度：1024px；
        高度：50 像素；
        边距：0 自动；
    }

    .子菜单{
        显示：无；
        位置：相对；

    }
    .submenu li {
        边框顶部：2px 纯黑色；
    }
    #navigation li:hover .submenu {
        显示：块；
        z-index：99999999999999999999999999999999999999；
    }
4

2 回答 2

3

而不是relative你.submenu使用位置的absolute位置

css

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

工作演示

于 2013-04-01T01:49:33.910 回答
2

相对定位不会使元素脱离正常的文档流。因此，当它出现时，它会像平常一样占据空间div并将其下方的所有东西推下。

要将其从正常文档流中删除，使其位于所有内容之上，请使用position: absolute. 在这种情况下，我们想要放在一切之上的是子菜单，所以将它应用到.submenu.

于 2013-04-01T01:52:11.043 回答