当我将子项显示为浮出控件时，如何阻止菜单展开？
[英]How can I stop my menu from expanding when I display subitems as a flyout?
问题描述
我对 CSS 完全陌生，并尝试获取一些 HTML 代码，并将其设置为下拉菜单和弹出菜单之间的混合样式。 到目前为止，我已经成功地完成了大部分目标，但是我仍然遇到了一个大问题。
容器正在扩展以匹配显示的弹出菜单，即使它应该是一个单独的菜单。
我假设我要么需要重新设计我的整个设计，要么我缺少一个简单的小东西。 有没有办法仅仅因为显示一个孩子就阻止父容器扩展？
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 & 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 & Wellness</span></a>
</li>
<li>
<a href="#"><span>Business Services</span></a>
</li>
<li>
<a href="#"><span>Government & 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 & 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 使事物出现并返回有关，但我不能确定。
如果这里更容易的话是指向我正在处理它的 codepen 的链接。
1 个解决方案
解决方案1
0 2020-12-18 04:14:31
由于您的代码太长，我创建了一个类似的结构，以便更容易理解。 您应该使用相对于父<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>
你可以在这里查看我的 codepen。
单击时如何阻止我的引导程序汉堡包图标和可折叠菜单跳跃？
[英]How can I stop my bootstrap hamburger icon and collapsible menu from jumping when clicked?
我正在尝试显示下拉菜单项，但是当我 hover 我的 cursor 在菜单项上时，整个导航栏正在扩展
[英]I am trying to display drop down menu items ,but when I hover my cursor on menu item the entire navbar is expanding
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.