当我将子项显示为浮出控件时，如何阻止菜单展开？答案

【问题标题】：How can I stop my menu from expanding when I display subitems as a flyout?当我将子项显示为浮出控件时，如何阻止菜单展开？
【发布时间】：2021-03-28 17:56:27
【问题描述】：

我对 CSS 完全陌生，并试图获取一些 HTML 代码，并将其设置为下拉菜单和弹出菜单之间的混合样式。到目前为止，我已经成功完成了大部分目标，但是我仍然遇到了一个大问题。

容器是 expanding 以匹配显示的弹出菜单，即使它应该是一个单独的菜单。

我假设我需要重新设计我的整个设计，或者我缺少一个简单的小东西。有没有办法阻止父容器仅仅因为显示一个子容器而扩展？

HTML 代码如下所示：

<nav>
   <ul class="top-level">
      <li>
         <span>Services</span>
         <ul class="drop-down">
            <li>
               <a href="#"><span>Website Development</span></a>
               <ul class="fly-out">
                  <li>
                     <a href="#"><span>Responsive Website Design</span></a>
                  </li>
                  <li>
                     <a href="#"><span>E-Commerce</span></a>
                  </li>
                  <li>
                     <a href="#"><span>DNN Consulting &amp; Development</span></a>
                     <ul class="fly-out">
                        <li>
                           <a href="#"><span>Jobs in Rock County Case Study</span></a>
                        </li>
                     </ul>
                  </li>
                  <li>
                     <a href="#"><span>Website Hosting</span></a>
                     <ul class="fly-out">
                        <li>
                           <a href="#"><span>Site Security</span></a>
                        </li>
                     </ul>
                  </li>
                  <li>
                     <a href="#"><span>What Is Custom Design?</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Conversion Rate Optimization</span></a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#"><span>App Development</span></a>
            </li>
            <li>
               <a href="#"><span>Marketing Automation</span></a>
            </li>
            <li>
               <a href="#"><span>Online Marketing</span></a>
               <ul class="fly-out">
                  <li>
                     <a href="#"><span>Search Engine Optimization</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Paid Search Marketing</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Local SEO for Businesses</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Social Media Marketing</span></a>
                     <ul class="fly-out">
                        <li>
                           <a href="#"><span>Social Media Services</span></a>
                        </li>
                     </ul>
                  </li>
                  <li>
                     <a href="#"><span>Conversion Rate Optimization</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Email Marketing</span></a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#"><span>ADA Compliance Websites</span></a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#"><span>Our Work</span></a>
         <ul class="drop-down">
            <li>
               <a href="#"><span>Manufacturing</span></a>
            </li>
            <li>
               <a href="#"><span>E-Commerce</span></a>
            </li>
            <li>
               <a href="#"><span>Health &amp; Wellness</span></a>
            </li>
            <li>
               <a href="#"><span>Business Services</span></a>
            </li>
            <li>
               <a href="#"><span>Government &amp; Non-Profit</span></a>
            </li>
            <li>
               <a href="#"><span>Print</span></a>
            </li>
         </ul>
      </li>
      <li>
         <span>Resources</span>
         <ul class="drop-down">
            <li>
               <a href="#"><span>Blog</span></a>
            </li>
            <li>
               <span>Tools</span>
               <ul class="fly-out">
                  <li>
                     <a href="#"><span>Responsive Site Test</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Conversion &amp; Traffic Calculator</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Website Design RFP</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Google Review Generator</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Project Estimator</span></a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#"><span>Support</span></a>
               <ul class="fly-out">
                  <li>
                     <a href="#"><span>FTP Request</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Submit a Ticket</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Terms Of Service</span></a>
                  </li>
                  <li>
                     <a href="#"><span>SEO Tutorials</span></a>
                     <ul class="fly-out">
                        <li>
                           <a href="#"><span>Introduction To Analytics</span></a>
                        </li>
                     </ul>
                  </li>
                  <li>
                     <a href="#"><span>CMS Tutorials</span></a>
                  </li>
                  <li>
                     <a href="#"><span>Website Design RFP</span></a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#"><span>Business Partners</span></a>
            </li>
            <li>
               <a href="#"><span>FAQs</span></a>
            </li>
            <li>
               <a href="#"><span>Plugins and Modules</span></a>
            </li>
            <li>
               <a href="#"><span>Case Studies</span></a>
            </li>
            <li>
               <a href="#"><span>eBooks/Webinars</span></a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#"><span>Company</span></a>
         <ul class="drop-down">
            <li>
               <a href="#"><span>Testimonials</span></a>
            </li>
            <li>
               <a href="#"><span>Community Involvement</span></a>
            </li>
            <li>
               <a href="#"><span>News</span></a>
            </li>
            <li>
               <a href="#"><span>Careers</span></a>
            </li>
            <li>
               <a href="#"><span>Meet Our Team</span></a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#"><span>Contact</span></a>
      </li>
   </ul>
</nav>

这是 CSS：

$nav-dark: rgb(34, 34, 34);
$nav-light: rgb(240, 255, 240);
$menu-green-dark: rgb(91, 146, 121);
$menu-green: rgb(138, 178, 153);
$menu-green-light: rgb(150, 194, 174);

//outer list
.top-level{
   list-style-type: none;
   margin: 0px;
   padding: 0px;
   top: 0px;
   left: 0px;
   position: fixed;
   //overflow: hidden;
}

//make dropdown visible on hovering 
//top-level list item
.top-level li:hover .drop-down{
  visibility: visible;
  display: block;
}

//list inside .top-level
.drop-down{
   list-style-type: none;
   overflow: visible;
   margin-top: 6px;
   padding: 0px;
   visibility: hidden;
   position: fixed;
   display:none;
}

//lists inside dropdown or other flyouts
.fly-out{
   list-style-type: none;
   overflow: visible;
   margin: 0px;
   padding: 0px;
   top: 0;
   left: 100%;
   position: fixed;
}



//make flyout visible on hovering 
//.drop-down list item
.drop-down li:hover .fly-out{
   display: block;
   visibility: visible;
}

//inside lists
.drop-down li .fly-out{
   display: none;
   visibility: hidden;
   position: relative;
}

.fly-out li .fly-out li{
   display: none;
   visibility: hidden;
}

.fly-out li:hover .fly-out li{
   display: block;
   visibility: visible;
   position: relative;
   background-color: $menu-green-light;
}

//outer list item's text
.top-level li > a,
.top-level li > span {
   padding: 4px;
   display: block;
   color: $nav-light
}

//headers for list items inside .top-level
.drop-down li > a,
.drop-down li > span {
   color: $nav-light;
}

//headers for list items inside .top-level
.fly-out li > a,
.fly-out li > span {
   color: $nav-light;
}

//outer list items
.top-level > li{
   float: left;
   background-color: $nav-dark;
   padding: 6px;
}

//list items inside .top-level
.drop-down > li{
   background-color: $menu-green-dark;
}

.fly-out > li{
   background-color: $menu-green;
}

现在我想知道是否与我使用 display: none/block 使事物出现并返回有关，但我不能确定。

如果更简单的here 是指向我正在处理它的代码笔的链接。

【问题讨论】：

您的代码太长。总是尝试create a minimal, reproducible example。

标签： html css menu dropdown flyout

【解决方案1】：

由于您的代码太长，我创建了一个类似的结构以便更容易理解。您应该使用相对于父 <li> 的绝对定位来对齐下拉菜单。

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  padding-left: 0;
  width: 240px;
  display: flex;
  justify-content: space-between;
  background: #333;
  color: #fff;
}

li {
  padding: 1em;
}

li:hover {
  background: #444;
}

.submenu {
  display: none;
  position: absolute;
  top: 3em;
  left: 0;
}

.submenu:hover {
  display: block;
}

.submenu-header {
  position: relative;
}

.submenu-header:hover>.submenu {
  display: block;
}

.sub-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 240px;
}

.sub-submenu:hover {
  display: block;
}

.sub-submenu-header {
  position: relative;
}

.sub-submenu-header:hover>.sub-submenu {
  display: block;
}

<nav>
  <ul>
    <li><a href="#">Link1</a></li>
    <li class='submenu-header'>
      <a href="#">Link2</a>

      <ul class='submenu'>
        <li><a href="#">link4</a></li>
        <li class='sub-submenu-header'>
          <a href="#">link5</a>

          <ul class="sub-submenu">
            <li><a href="#">link7</a></li>
            <li><a href="#">link8</a></li>
          </ul>
        </li>
        <li><a href="#">link6</a></li>
      </ul>
    </li>
    <li><a href="#">Link3</a></li>
  </ul>
</nav>

您可以查看我的密码笔here。

【讨论】：