1

http://jsfiddle.net/msbyuva/QPQqs/

li メニューリンク こんにちは、を使用して形成されたメニューがあります

<ul class="topnav">
                            <li>@Html.ActionLink("Configuration", "Configuration", "Home")</li>
                            <li>@Html.ActionLink("Reporting", "Reporting", "Home")
                            <ul class="subnav">
                    <li>@Html.ActionLink("Pipeline", "Pipeline", "Pipeline", null, new { target = "_blank", Url = "http://storespipeline/stores/" })</li>
                            <li>D2C OBI Reports</li>                  


                          <li>@Html.ActionLink("Device Utilization", "DeviceUtilization", "DeviceUtilization")</li>

                            <li>@Html.ActionLink("Display Audit", "DisplayAudit", "DisplayAudit")</li>
                            <li>@Html.ActionLink("TrueVUE Reports", "TrueVUE", "TrueVUE")</li>                                 
                            </ul>
                            </li>
                            <li>@Html.ActionLink("Admin", "Admin", "Home")</li>
                    </ul>

CSS:

ul.topnav { リストスタイル: なし; パディング: 10px; マージン: 0; フロート: 左; 幅: 100%; 背景: #f6f6f6; フォントサイズ: 1em; 色: 黒; } ul.topnav li {フロート: 左; マージン: 0; パディング: 0 15px 0 0; 位置: 相対; } ul.topnav li a { パディング: 5px 0px 0px 0px; 色: 黒; 表示: 表; テキスト装飾: なし; フロート: 左; } ul.topnav li a:hover { text-decoration: underline; フォントの太さ: 太字; }

    ul.topnav li span.subhover
    {
    }
    ul.topnav li ul.subnav
    {
        list-style: none;
        position: absolute;
        left: 0px;
        top: 25px;
        background: #f6f6f6;
        margin: 0;
        padding: 0px 0px 0px 0px;
        height: auto;
        display: none;
        float: left;
        min-width: 100px;
        width: auto;
    }
    ul.topnav li ul.subnav li
    {
        margin: 0px;
        padding: 4px 10px 0px 10px;
        height: auto;
        line-height: 100%;
    }

    html ul.topnav li ul.subnav li a
    {
        float: left;
        width: 150%;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        text-align: left;
    }

    html ul.topnav li ul.subnav li a:hover
    {

    }
</style>

リンクの例 -- Display Audit -- をクリックすると、ページが読み込まれると、メニュー リンクがページ コンテンツの下に表示されます... 画像で確認できます (最後の 2 つのリンクはページ コンテンツの下に表示されます)。 .... ページ コンテンツの上にメニュー リンクを表示するにはどうすればよいですか??

私はIE7、CSS 2.1を使用しています

4

1 に答える 1

4

z-index を使用する必要があります。z-index を機能させるには、ナビゲーション コンテナーとコンテンツ コンテナーの両方が相対位置、絶対位置、または固定位置を持っている必要があります。あなたの例では、相対的な配置をお勧めします。

.topnav {
  position:relative;
  z-index:1000;
}

.yourContentContainer{
  position:relative;
  z-index:1;
}
于 2013-08-28T20:21:29.023 に答える