在我的作品集/简历网站上工作，但菜单没有像我想要的那样悬停

Question

我是一个相当新的编码和新到这个网站c:我一直在学习SheCodes课程，目前我正在学习Responsive课程，因为我想把我的编程生涯朝那个方向发展。无论如何，我在我自己的网站上工作，以显示我的插图作品和什么https://mariafloscher.netlify.app/但菜单不是按我想要的方式悬停，我希望整个部分看起来是白色的，而不仅仅是单词周围的区域。

这是GitHub存储库https://github.com/mariafloscher/cv-and-portfolio

下面是菜单的HTML部分:

<div id="menu">
<div><a href="index.html" class="menu-item">homepage</a></div>
<div><a href="pages/about.html" class="menu-item">about</a></div>
<div><a href="pages/work-experience.html" class="menu-item">work experience</a></div>
<div><a href="pages/works.html" class="menu-item">works</a></div>
<div><a href="pages/commissions-hiring.html" class="menu-item">commissions' & hiring info</a></div>
<div><a href="pages/contact.html" class="menu-item">contact</a></div>
</div>

这里是CSS

#menu { 
display: flex;
justify-content:space-evenly;
color: #f8f8f8;
background-color: #202020;
padding: 5px 0px 5px 0px;
height: fit-content;
}

.menu-item {
color: #f8f8f8;
background-color: #202020;
text-align: center;
display: inline-block;
text-decoration: none;
width: -moz-fit-content;
}
.menu-item:hover {
background-color: #f8f8f8;
color: #202020;
}
.menu-link {
color: #f8f8f8;
background-color: #202020;
text-align: center;
text-decoration: none;
}
.menu-link:hover {
background-color: #f8f8f8;
color: #202020;
text-decoration: none;
max-width: max-content;
}

提前感谢<3祝你有一个美好的一天和一个美好的一周的开始:D!!

Answer 1

将menu-item从a移至div，并在css

1. 菜单项添加flex: 1。这将确保所有项目被拉伸到最大可用空间
2. 添加.menu-item a和.menu-item:hover a来正确处理菜单项

注:您可以在.menu-item上添加column-gap: 10px到#menu或padding: 0 5px，以便在元素之间添加更多空间。两者都用，你就会看到区别了。

下面是完整的示例

#menu {
display: flex;
justify-content: space-evenly;
color: #f8f8f8;
background-color: #202020;
height: fit-content;
}

.menu-item {
flex: 1;
background-color: #202020;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.menu-item a {
color: #f8f8f8;
display: inline-block;
text-decoration: none;
}
.menu-item:hover {
background-color: #f8f8f8;
}
.menu-item:hover a {
color: #202020;
}

<div id="menu">
<div class="menu-item"><a href="index.html">homepage</a></div>
<div class="menu-item"><a href="pages/about.html">about</a></div>
<div class="menu-item"><a href="pages/work-experience.html">work experience</a></div>
<div class="menu-item"><a href="pages/works.html">works</a></div>
<div class="menu-item"><a href="pages/commissions-hiring.html">commissions' & hiring info</a></div>
<div class="menu-item"><a href="pages/contact.html">contact</a></div>
</div>

Answer 2

首先，我认为你不需要在你的<a>标签周围加上<div>标签。

<div id="menu">
<a href="index.html" class="menu-item">homepage</a>
<a href="pages/about.html" class="menu-item">about</a>
<a href="pages/work-experience.html" class="menu-item">work experience</a>
<a href="pages/works.html" class="menu-item">works</a>
<a href="pages/commissions-hiring.html" class="menu-item">commissions' & hiring info</a>
<a href="pages/contact.html" class="menu-item">contact</a>
</div>

如果你想在整个菜单项上看到悬停动画，你必须删除#menu的填充，并将其添加到.menu-item。如果您使用display: flex;代替#menu，请使用flex: 1 1 auto;。

#menu { 
display: flex;
justify-content:space-evenly;
color: #f8f8f8;
background-color: #202020;  
height: fit-content;
}

.menu-item {
flex: 1 1 auto;
padding: 5px 0;
color: #f8f8f8;
background-color: #202020;
text-align: center;
display: inline-block;
text-decoration: none;
width: -moz-fit-content;
}
.menu-item:hover {
background-color: #f8f8f8;
color: #202020;
}
.menu-link {
color: #f8f8f8;
background-color: #202020;
text-align: center;
text-decoration: none;
}
.menu-link:hover {
background-color: #f8f8f8;
color: #202020;
text-decoration: none;
max-width: max-content;
}