3

何らかの理由で z-index が機能していないようです。サブメニューを作ってみました。つまり、2 番目のバーです。#やり損ねた内容を振り返るには....

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");
        background-attachment: 固定;
        背景サイズ: 100% 100%;
        高さ:100%;
    }
    #ラッパー{
        幅:1024px;
        最小高さ: 100%;
        マージン:0 自動;
    }
    #バナー{
        高さ:216px;
    }
    #ナビゲーション {
        位置:相対;
        リスト スタイル タイプ: なし;
        フォントサイズ: 18px;
        背景色: オレンジ;
        font-family: 'EB Garamond', serif;
        不透明度:0.8;
        Z インデックス: 15000001;

    }

    #ナビゲーション>li {
        フロート:左;

    }
    #ナビゲーション {
        表示ブロック;
        パディング:10px 10px;
        色:白;
        フォントの太さ: 太字;
        幅:183.81px;
        高さ:40px;
        テキスト整列: 中央;
        背景色: 青;
        border-left:1px ベタ黒;
        テキスト装飾:なし;
    }
    #ナビゲーション a:ホバー {
        背景色:白;
        青色;
        border-top:3px 単色の赤;
        不透明度:0.9999;
        margin-bottom: -3px;
    }
    #バナー h1 {
        フォントサイズ: 20px;
        テキスト整列: 中央;
        位置: 相対;
        上: 1024px;
    }
    ＃コンテンツ {
        位置:相対;
        高さ:500px;
        背景色:白;
        不透明度:0.9;
        クリア: 両方;
        z-index:1;
    }

    #コンテンツp{
        位置:相対;
        上:6px;
        フォントサイズ: 30px;
        z-index:1;
    }

    #フッター {
        垂直整列: 下;
        背景色: オレンジ;
        幅:1024px;
        高さ:50px;
        マージン:0 自動;
    }

    .サブメニュー {
        表示:なし;
        位置:相対;

    }
    .submenu リ {
        border-top: 2px ベタ黒;
    }
    #ナビゲーション Li:hover .submenu {
        表示ブロック;
        z-index:9999999999999999999999999999999999999;
    }
4

2 に答える 2

3

使用位置のrelative位置の代わりに.submenuabsolute

CSS

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

動作デモ

于 2013-04-01T01:49:33.910 に答える