我有一个包含多个链接的菜单栏,我希望将第三个链接作为下拉列表。
是否可以在这些href链接下放置一个下拉列表?我需要具有选项卡3才能具有具有值6和7的下拉列表。我在互联网上找不到其他示例。请帮助
nav {
position: relative;
width: 100%;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
nav a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
a:nth-child(1) {
width: 200px;
}
a:nth-child(2) {
width: 200px;
}
a:nth-child(3) {
width: 200px;
}
a:nth-child(4) {
width: 200px;
}
a:nth-child(5) {
width: 200px;
}
nav a:nth-child(1):hover~.animation {
width: 200px;
left: 0;
background-color: #29363B;
}
nav a:nth-child(2):hover~.animation {
width: 200px;
left: 200px;
background-color: #EA495F;
}
nav a:nth-child(3):hover~.animation {
width: 200px;
left: 400px;
background-color: #F4837D;
}
nav a:nth-child(4):hover~.animation {
width: 200px;
left: 600px;
background-color: #FAA664;
}
nav a:nth-child(5):hover~.animation {
width: 200px;
left: 800px;
background-color: #99B998;
}
.active {
border-radius: 8px;
background-color: #29363B;
color: white;
}
<nav>
<a href="#" class="active" style="text-decoration: none; color: white">ONE</a>
<a href="#" style="text-decoration: none; color: white">TWO</a>
<a href="#" style="text-decoration: none; color: white">THREE</a>
<a href="#" style="text-decoration: none; color: white">FOUR</a>
<a href="#" style="text-decoration: none; color: white">FIVE</a>
<div class="animation start-home"></div>
</nav>
答案 0 :(得分:0)
您可以在链接内进行选择(隐藏),直到该链接悬停为止。
link__dropdown {
display: none;
}
link:hover link__dropdown {
display: block;
}
<nav>
<a href="#" class="active" style="text-decoration: none; color: white">ONE</a>
<a href="#" style="text-decoration: none; color: white" class="link">TWO</a>
<a href="#" style="text-decoration: none; color: white" class="link">
<select class="link__dropdown">
<option>6</option>
<option>7</option>
</select>
</a>
<a href="#" style="text-decoration: none; color: white" class="link">FOUR</a>
<a href="#" style="text-decoration: none; color: white" class="link">FIVE</a>
<div class="animation start-home"></div>
</nav>
答案 1 :(得分:0)
一种方法是使用纯CSS并在用户每次将鼠标悬停在包含链接的列表项上时显示下拉列表。
HTML和CSS:
.navigation__item {
color: #000;
cursor: pointer;
display: inline-block;
text-align: center;
padding: 2rem 2rem;
text-transform: capitalize;
position: relative;
}
/* links */
.navigation__item a {
text-decoration: none;
color: inherit;
}
/* secondary ul */
.navigation__item ul {
display: none;
}
/* li:hover */
.navigation__item:hover {
color: #000;
background-color: #fff;
}
/* secondary ul visibility change */
.navigation__item:hover ul {
color: #000;
background-color: #fff;
z-index: 2000;
display: block;
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-between;
margin-top: 1rem;
width: 20rem;
top: 100%;
left: 50%;
transform: translate(-50%, -10%);
position: absolute;
}
/* secondary li */
.navigation__item:hover ul li {
display: block;
padding: 1rem 1rem;
}
/* hover effect on dropdown links */
.navigation__item:hover ul li:hover {
color: #fff;
background-color: #000;
}
/* Change sytling for first list item */
.navigation__item:hover ul li:first-of-type {
color: #fff;
background-color: #000;
}
<ul class="navigation__list">
<li class="navigation__item active"><a href="/">Home</a></li>
<li class="navigation__item">Services▼
<ul>
<li><a>View All Services</a></li>
<li>Service 1 </li>
<li>Service 2</li>
<li>Service 3 </li>
<li>Service 4 </li>
</ul>
</li>
<li class="navigation__item">Blog▼
<ul>
<li><a href="blog">Browse Our Blog</a></li>
<li>Something else</li>
<li>Something else</li>
</ul>
</li>
<li class="navigation__item"><a href="#">Contact</a></li>
</ul>