html - 主下拉菜单中的 HTML 子菜单远离主下拉菜单显示
问题描述
如何消除主下拉菜单和子菜单之间的差距?当我在下拉菜单中添加更多内容时,子菜单和主下拉菜单之间的差距也会增加。如果我将鼠标指针放在主下拉菜单和子下拉菜单之间,它会闪烁。我在此处发布屏幕截图以及 CSS 和 HTML:
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
.nav-menu > ul > li + li {
padding-left: 20px;
}
.nav-menu a {
display: block;
position: relative;
color: #1a000d;
padding: 14px 0 15px 0;
transition: 0.3s;
font-size: 14px;
font-weight:bold;
font-family: "Open Sans", sans-serif;
text-transform: uppercase;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
color: #005ce6;
text-decoration: none;
}
.nav-menu .drop-down ul {
display: block;
position: absolute;
left: 20px;
top: calc(100% - 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: ease all 0.3s;
}
.nav-menu .drop-down:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.nav-menu .drop-down li {
min-width: 180px;
position: relative;
}
.nav-menu .drop-down ul a {
padding: 10px 20px;
font-size: 13px;
font-weight: 500;
text-transform: none;
color: #1a000d;
}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
color: #005ce6;
font-size: 14px;
font-weight:bold;
}
.nav-menu .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {
top: 0;
left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {
opacity: 1;
top: 0;
left: 100%;
}
.nav-menu .drop-down .drop-down > a {
padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\eaa0";
font-family: IcoFont;
position: absolute;
right: 15px;
}
@media (max-width: 1366px) {
.nav-menu .drop-down .drop-down ul {
left: -90%;
}
.nav-menu .drop-down .drop-down:hover > ul {
left: -100%;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\ea9d";
}
}
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Gallery</a></li>
<li class="drop-down"><a href="">Courses</a>
<ul>
<li class="drop-down"><a href="#">IELTS Regular</a>
<ul>
<li><a href="#">Academic Training</a></li>
<li><a href="#">General Training</a></li>
</ul>
</li>
<li class="drop-down"><a href="#">IELTS WEEKEND BATCH</a>
<ul>
<li><a href="#">Academic Training</a></li>
<li><a href="#">General Training</a></li>
</ul>
</li>
<li><a href="#">IELTS ONLINE</a></li>
<li class="drop-down"><a href="#">OET Regular</a>
<ul>
<li><a href="#">Listening sub-test</a></li>
<li><a href="#">Reading sub-test</a></li>
<li><a href="#">Speaking sub-test</a></li>
<li><a href="#">Role-plays</a></li>
<li><a href="#">Writing sub-test </a></li>
</ul>
</li>
<li><a href="#">OET Online</a></li>
<li><a href="#">DHA, HAAD, MOH, Prometric </a></li>
<li class="drop-down"><a href="#">7 Days crash course for Nurses</a>
<ul>
<li><a href="#">PROMETRIC EXAM for SAUDI</a></li>
<li><a href="#">PROMETRIC EXAM for OMAN</a></li>
<li><a href="#">PROMETRIC EXAM for QATAR</a></li>
<li><a href="#">DHA for DUBAI</a></li>
<li><a href="#">HAAD for ABU DHABI</a></li>
</ul>
</li>
<li><a href="#">RN Regular</a></li>
<li class="drop-down"><a href="#">10 Days Pharmacy Crash Course</a>
<ul>
<li><a href="#">HAAD</a></li>
<li><a href="#">DHA</a></li>
<li><a href="#">MOH</a></li>
<li><a href="#">PROMETRIC</a></li>
</ul>
</li>
<li class="drop-down"><a href="#">PHARMACY REGULAR COURSE</a>
<ul>
<li><a href="#">PEBC</a></li>
<li><a href="#">CAPS</a></li>
<li><a href="#">OSPAP</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Exams</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">News</a></li>
<li><a href="">Career</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="">Login</a></li>
<li ><a class="onlineclass" href="">Online class</a></li>
</ul>
</nav>
解决方案
如果要在缩放 100 时使子菜单栏相同,则应进行另一个 @media 查询或调整最大宽度。
对于悬停时闪烁的部分,它正在发生,因为您正在选择将消失的子菜单栏以及将显示并转到左侧的子菜单。尝试从右侧悬停下拉栏,它不会闪烁。
更改子菜单的左侧
推荐阅读
- python - 基于参数的模拟 sqlalchemy 查询。例如:db.session.query(Model.id)
- r - 如何将打印值放入矩阵
- android - 如何在 Hilt 中生成相同类型的对象?
- reactjs - React – 如何有条件地返回一个值(或回退)
- java - AndroidOS中imageview.getImageMatrix()的HarmonyOS替代方法是什么
- reactjs - 通过 React 中自定义事件的详细信息传输的输出数据
- java - 我们可以在数据库中的模式内有模式吗
- c# - 无法在主窗体的控件顶部显示子窗体
- javascript - 不变违规:组件`RNCSafeAreaProvider`的视图配置getter回调必须是一个函数(收到`undefined`)
- java - 为什么使用请求 bean 自动装配不起作用