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

Posted 2023-03-05

【中文标题】li 菜单链接在页面加载时位于内容下方 + css

【英文标题】：li menu links going underneath content when page loads + css

【发布时间】：2013-09-01 01:01:22

【问题描述】：

http://jsfiddle.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 列表样式：无； 填充：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 文字装饰：下划线； 字体粗细：粗体；

    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

【问题讨论】：

CSS 部分在哪里？你能提供一个小提琴吗？

你能提供一个小提琴吗？

我用 css 和 html 代码更新了问题部分......这是小提琴jsfiddle.net/msbyuva/QPQqs的链接

【参考方案1】：

您需要使用 z-index。要使 z-index 工作，导航容器和内容容器都需要具有相对、绝对或固定的位置。对于您的示例，我建议使用相对定位。

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


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

【讨论】：

您可能需要使用不同的位置，例如菜单的相对或固定位置，以及内容/报告的绝对位置，因为我注意到两个相对定位的 div 偶尔会交互。例如，您的下拉菜单实际上可能会强制报告移动到页面下方的位置，这看起来很难看，而且真的很烦人。一定要检查多个浏览器，有些可能会不一致地计算 div 之间的关系。