导航栏下拉菜单悬停失效及间距问题技术求助

问题列表 #

• 鼠标悬停导航标题显示下拉菜单后，移动到第4个选项时菜单消失
• 导航栏与主标题区域之间存在间隙

修复代码 #

HTML（保持原结构，无需修改） #

<!DOCTYPE HTML>
<html>
    <head>
        <title>MACS</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="is-preload">
        <div id="wrapper">
                <nav>
                    <ul>
                        <li><a href = "">Center</a>
                            <ul>
                                <li><a href = "">Central</a></li>
                                <li><a href = "">sphere</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Hub</a>
                            <ul>
                                <li><a href = "">Training</a></li>
                                <li><a href = "">lyst</a></li>
                                <li><a href = "">BIT</a></li>
                                <li><a href = "">watch</a></li>
                                <li><a href = "">Query</a></li>
                                <li><a href = "">MPR</a></li>
                                <li><a href = "">Lawsuit Reporting</a></li>
                                <li><a href = "">Sample Reports</a></li>
                                <li><a href = "">Access Request and Support</a></li>
                                <li><a href = "">Other Apps</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Client Support</a>
                            <ul>
                                <li><a href = "">Service Catalog</a></li>
                                <li><a href = "">Placeholder</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Peer Benchmarking</a>
                            <ul>
                                <li><a href = "">Peer Information and Reporting</a></li>
                                <li><a href = "">Benchmarking Guide</a></li>
                                <li><a href = "">Plan Design Summary</a></li>
                                <li><a href = "">Training</a></li>
                                <li><a href = "">FAQ</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Consultant Support</a>
                            <ul>
                                <li><a href = "">Consultant Templates</a></li>
                                <li><a href = "">Consultant Template Catalog</a></li>
                                <li><a href = "">Consultant Dashboard</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Prospect Analytics</a>
                            <ul>
                                <li><a href = "">Reference Guide</a></li>
                                <li><a href = "">Priority Log</a></li>
                                <li><a href = "">Implementation</a></li>
                                <li><a href = "">FAQ</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Book of Business</a>
                            <ul>
                                <li><a href = "">Business Management Reporting</a></li>
                                <li><a href = "">Trend</a></li>
                                <li><a href = "">Plan Monitor Report</a></li>
                                <li><a href = "">Client Master Table</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Lawsuit</a>
                            <ul>
                                <li><a href = "">Legal Resources</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Rebates and Compliance</a>
                            <ul>
                                <li><a href = "">Rebate Invoicing Solution Center</a></li>
                                <li><a href = "">Rebates Invoicing Activity Application</a></li>
                                <li><a href = "">Rebates Invoicing User Guide</a></li>
                            </ul>
                        </li>
                        <li><a href = "">Resources</a>
                            <ul>
                                <li><a href = "">Alation</a></li>
                                <li><a href = "">Field Solution Portal</a></li>
                                <li><a href = "">Polaris</a></li>
                                <li><a href = "">Operational Analytics Request Form</a></li>
                                <li><a href = "">Requesting an Escalation for Polaris case</a></li>
                                <li><a href = "">Claims Available for Reporting</a></li>
                                <li><a href = "">Submitting Cases via Polaris</a></li>
                                <li><a href = "">Data Use Policy</a></li>
                                <li><a href = "">Operating Model</a></li>
                                <li><a href = "">Knowledge Solution</a></li>
                                <li><a href = "">Insight Delivery</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <section class="intro">
                    <header>
                        <h1>Market Analytics Client Support</h1>
                        <p>Market Analytics is the trusted advisor for analysis and reporting. </p>
                    </header>
                    <div class="content">
                    </div>
                </section>
    </body>
</html>

CSS 修改内容 #

修复下拉菜单消失问题

找到导航项的CSS规则，替换或添加以下代码：

nav > ul > li {
  overflow: visible; /* 取消父元素的隐藏限制，让下拉菜单完整显示 */
  position: relative;
}

nav > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999; /* 提高层级，防止被其他元素挡住 */
  display: none;
}

nav > ul > li:hover > ul {
  display: block; /* 鼠标悬停时显示下拉菜单 */
}

修复导航与主标题间隙问题

添加或修改以下CSS规则：

nav {
  margin-bottom: 0; /* 移除导航底部的默认边距 */
}

.intro {
  margin-top: 0; /* 移除主标题区域顶部的默认边距 */
  padding-top: 0; /* 如有需要，同时移除顶部内边距 */
}

修复逻辑 #

• 下拉菜单消失：父元素的overflow:hidden会把超出自身范围的下拉菜单部分截断，改成visible后就能完整展示所有选项；加z-index是为了确保下拉菜单不会被页面其他内容遮挡。
• 导航与主标题间隙：间隙来自导航或主标题区域的默认margin/padding，直接把对应边距清零就能消除。

内容的提问来源于stack exchange，提问作者dataenthu