li加载页面时位于内容下方的菜单链接+css

Question

http://jsfidle.net/msbyuva/qpqqs/

<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{list-style：none；padding：10px；margin：0；float：left；width：100%；background:#f6f6f6；font-size：1em；color：black；}ul.topnav li{float：left；margin：0；padding：0 15px 0 0；position：relatic；}ul.topnav li a{padding：5px 0px 0px 0px；color：black；display：table；text-deneration：none；float：left；

    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>

当我点击一个链接示例--显示审核--当页面加载时--菜单链接就在页面内容下面...可以在图像中看到（最后两个链接在页面内容下面）.....如何显示页面内容上方的菜单链接？？

我正在使用IE7,CSS 2.1

Answer 1

您需要使用Z索引。要使z-index工作，导航容器和内容容器都需要有一个相对、绝对或固定的位置。对于你的例子，我建议使用相对定位。

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

.yourContentContainer{
  position:relative;
  z-index:1;
}