我正在尝试在 https://www.wmf.com/de/ 上设置导航栏,其中相应导航项的导航宽度为 100%。
我目前的方向是让我的导航和每个导航项目的单独部门(在这种情况下我只做了一个)。所以我想如果我使用悬停,我可以使相应的部门可见。
我是否朝着正确的方向前进,或者还有什么其他/更好的方法可以实现这一目标?
.navigation {
width: 100%;
height: auto;
max-height: 20vh;
background: white;
display: flex;
;
align-items: center;
justify-content: center;
}
.navigation-item {
position: relative;
height: 10%;
width: 15%;
font-size: 1.2em;
color: black;
font-weight: bold;
padding: 0.5em 1em 0.5em 1em;
margin: 0px 1% 0px 1%;
text-align: center;
text-transform: uppercase;
transition: background 200ms linear;
text-decoration: none;
}
.navigation-item:hover {
background: lightgrey;
}
ul a {
font-size: 14px;
}
.nav-menu {
position: absolute;
background: lightgrey;
width: 100%;
max-height: 25vh;
opacity: 1;
}
#navigation-item2:hover .nav-menu {
z-index: 2;
}
.dropdown {
opacity: 0;
position: absolute;
font-size: 10px;
}
<header>
<nav class="navigation">
<a href="https://www.amazon.com" style="flex: 0.5; margin-left: 20px">
<img src="/images/Logo.png" alt="Logo" style="height:100%; width:auto; max-height: 16vh; margin-top: 3px;">
</a>
<a class="navigation-item" href="https://www.amh-solingen.de">
Home</a>
<a class="navigation-item" href="https://www.amazon.com">
Portfolio</a>
<a class="navigation-item" id="navigation-item2" href="https://www.amazon.com">
Produkte</a>
<a class="navigation-item" href="http://amh-solingen.de/Ueber_uns.html">
Über uns</a>
</nav>
<div class="nav-menu">
<ul class="dropdown">
<li>
<ul>
<li><a class="navigation-item" href="https://www.amazon.com">Kochmesser</a></li>
<li><a class="navigation-item" href="https://www.amazon.com">Küchenmesser</a></li>
</ul>
<li><a class="navigation-item" href="https://www.amazon.com">Scheren</a></li>
<li><a class="navigation-item" href="https://www.amazon.com">Klingen</a></li>
</ul>
</div>
</header>