CSS / HTML：如何向现有导航栏添加下拉菜单？ [英] CSS/HTML: How to add a dropdown menu to existing navbar?
问题描述
大家好，我可以在我现有的导航栏中使用此下拉菜单。下拉菜单应位于导航栏的右侧。
Hey guys can anyone help me I need this dropdown menu in my existing navbar. The dropdown menu should be on the right hand site of the navbar. please!
这是html正文部分：
This is the html body part:
<body>
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown, right">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</body>
这是我的CSS代码：
body {
background-color: #D3D3D3;
}
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: #D3D3D3;
color: #000;
}
ul.topnav li a.active {
background-color: #D2691E;
color: white;
}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px){
ul.topnav,
ul.topnav {position: unset}
ul.topnav li.right,
ul.topnav li {float: none;}
}
推荐答案
隐藏菜单，然后将其设置为位置：绝对，以便在显示时不会更改导航栏的布局。然后，当您将鼠标悬停在 .dropdown 上时，显示菜单。还更改了字体颜色，使链接可见，从导航栏中删除了 overflow：hidden; ，以便菜单可以在菜单外溢出并仍然可见，并更改了：hover 选择器，更改链接的背景颜色，以在 li 而不是<$ c悬停时触发$ c> a ，以便在与下拉菜单进行交互时下拉链接的颜色保持不变。
Hide the menu, then set it to position: absolute so that when it's displayed, it won't change the layout of the navbar. Then when you hover .dropdown, show the menu. Also changed the font color so the links are visible, removed overflow: hidden; from the navbar so that the menu can overflow outside of the menu and still be visible, and changed the :hover selector that changes the background color of the links to trigger on hover of the li instead of the a so that the dropdown link color stays changed as you interact with the dropdown menu.
body {
background-color: #D3D3D3;
}
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li:hover a:not(.active) {
background-color: #D3D3D3;
color: #000;
}
ul.topnav li a.active {
background-color: #D2691E;
color: white;
}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px){
ul.topnav,
ul.topnav {position: unset}
ul.topnav li.right,
ul.topnav li {float: none;}
}
ul.topnav .dropdown-content {
display: none;
position: absolute;
}
ul.topnav .dropdown-content a {
color: black;
}
ul.topnav .dropdown:hover > .dropdown-content {
display: block;
}
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown right">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
这篇关于CSS / HTML：如何向现有导航栏添加下拉菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
