英文:
Why is my submenu parent focusing when I hover over another menu item?
问题
我正在为我的网站使用Bootstrap模板制作一个侧边导航菜单。我是一名设计师，不是开发人员，但我正在尝试通过实践学习。大部分功能都已经正常运行。但我无法弄清楚为什么当我悬停在第一个或第二个菜单项上时，第三个菜单项会展开。
这是代码链接：https://codepen.io/steve-mullen/pen/WNgNBjE
<html lang="en">
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li class="no-sub-nav"><a href="#home" class="scrollto active">1<span>Menu 1</span></a></li>
<li class="no-sub-nav"><a href="#about" class="scrollto">2<span>Menu 2</span></a></li>
<li class="has-sub-nav"><a href="#portfolio" class="scrollto">3<span>Menu 3</span>
<ul class="sub-nav">
<li><a href=""><span>Sub 1</span></a></li>
<li><a href=""><span>Sub 2</span></a></li>
<li><a href=""><span>Sub 3</span></a></li>
<li><a href=""><span>Sub 4</span></a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
/* CSS部分代码请查看原链接 */
如果您需要进一步的帮助或解释，请告诉我。
英文:
I'm working on a side navigation menu for my website using a bootstrap template. I'm a designer, not a developer, but I'm trying to learn by doing. I got everything working right, mostly. But I can't figure out why when I hover over the first or second menu items, the third one is expanded.
It's a parent for a submenu, but I've tried removing CSS rules one by one to see if that changes or fixes anything, but it doesn't seem to be working. Here is a link to the codepen that has bootstrap already loaded.
https://codepen.io/steve-mullen/pen/WNgNBjE
<html lang="en">
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li class="no-sub-nav"><a href="#home" class="scrollto active">1<span>Menu 1</span></a></li>
<li class="no-sub-nav"><a href="#about" class="scrollto">2<span>Menu 2</span></a></li>
<li class="has-sub-nav"><a href="#portfolio" class="scrollto">3<span>Menu 3</span></a>
<ul class="sub-nav">
<li><a href=""><span>Sub 1</span></a></li>
<li><a href=""><span>Sub 2</span></a></li>
<li><a href=""><span>Sub 3</span></a></li>
<li><a href=""><span>Sub 4</span></a></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
body {
font-family: "Open Sans", sans-serif;
color: #272829;
}
a {
color: #0563bb;
text-decoration: none;
}
a:hover {
color: #067ded;
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9997;
transition: all 0.5s;
padding: 15px;
overflow-y: auto;
}
@media (max-width: 991px) {
#header {
width: 300px;
background: #fff;
border-right: 1px solid #e6e9ec;
left: -300px;
}
}
/* Main Nav */
.nav-menu {
padding: 0;
display: block;
position: relative;
}
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: relative;
white-space: nowrap;
}
.no-sub-nav a,
.no-sub-nav a:focus {
display: flex;
align-items: center;
color: rgba(26,26,26,1.00);
padding: 10px 18px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu a {
border: 4px #1a1a1a solid;
}
.nav-menu a i,
.nav-menu a:focus i {
font-size: 20px;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
}
@media (min-width: 992px) {
.nav-menu a,
.nav-menu a:focus {
width: 56px;
}
.nav-menu a span,
.nav-menu a:focus span {
display: none;
color: #fff;
}
.nav-menu li {
padding: 0;
}
.sub-nav {
display:none;
position: absolute;
}
.has-sub-nav:hover .sub-nav {
display: block;
transition: 0.3 sec;
position: absolute;
margin: 0;
width:100%;
padding-top: 8px;
padding-left:15px;
}
}
.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 18px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover>a span {
color: #fff;
}
.no-sub-nav a:hover,
.no-sub-nav:hover>a {
width: 100%;
color: #fff;
}
.no-sub-nav a:hover span,
.no-sub-nav:hover>a span{
display: block;
}
/* Sub Nav */
.has-sub-nav {
padding: 0;
display: block;
position: relative;
}
.has-sub-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.has-sub-nav ul {
position: relative;
white-space: nowrap;
}
.no-sub-nav {
margin-bottom: 8px;
}
.has-sub-nav li {
padding-bottom:8px;
}
.has-sub-nav a,
.has-sub-nav a:focus {
display: flex;
align-items: center;
color: rgba(26,26,26,1.00);
padding: 10px 18px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.has-sub-nav a {
border: 4px #1a1a1a solid;
}
.has-sub-nav a span,
.has-sub-nav a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
}
.has-sub-nav a:hover,
.has-sub-nav .active,
.has-sub-nav .active:focus,
.has-sub-nav:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 18px;
}
.has-sub-nav a:hover span,
.has-sub-nav .active span,
.has-sub-nav .active:focus span,
.has-sub-nav:hover>a span {
color: #fff;
}
.has-sub-nav a:hover,
.has-sub-nav:hover>a {
width: 100%;
color: #fff;
}
.has-sub-nav a:hover span,
.has-sub-nav:hover>a span{
display: block;
}
答案1
得分: 1
在你的CSS中我找到了问题，你只需要移除以下部分的width: 100%：
.has-sub-nav a,
.has-sub-nav a:focus
它将会正常工作。
这是因为width:100%使得第三个菜单适应其容器(ul)的宽度，所以每当第一个或第二个菜单展开时，ul会扩展并导致第三个菜单跟随其父元素的宽度，从而引起问题。
英文:
I found the issue in your CSS, you just need to remove the width: 100% in
.has-sub-nav a,
.has-sub-nav a:focus
and it will works as normal.
This is because the width:100% make the 3rd menu to fit to its container's(ul) width, so whenenver 1st or 2nd menu is expanding, ul is expanding and cause 3rd to following its parent width then cause the issue.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论