如何从导航栏中的链接创建下拉菜单
从导航栏中的链接创建下拉菜单可以通过以下步骤实现：
- HTML结构：在导航栏的链接标签中添加一个父级元素，通常使用
<li>标签作为父级元素，例如：<ul> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li class="dropdown"> <a href="#" class="dropbtn">链接3</a> <div class="dropdown-content"> <a href="#">下拉菜单项1</a> <a href="#">下拉菜单项2</a> <a href="#">下拉菜单项3</a> </div> </li> </ul> - CSS样式：使用CSS样式来隐藏下拉菜单，并设置下拉菜单的显示位置和样式，例如：.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; }
- JavaScript交互（可选）：如果需要在用户交互时显示/隐藏下拉菜单，可以使用JavaScript来实现。例如，当鼠标悬停在链接上时显示下拉菜单，当鼠标离开时隐藏下拉菜单：var dropdown = document.getElementsByClassName("dropdown"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("mouseover", function() { this.getElementsByClassName("dropdown-content")[0].style.display = "block"; }); dropdown[i].addEventListener("mouseout", function() { this.getElementsByClassName("dropdown-content")[0].style.display = "none"; }); }
以上是创建导航栏中的下拉菜单的基本步骤。根据具体需求，可以进一步美化样式、添加动画效果，以及实现其他交互功能。
相关·内容
3回答
当单击屏幕上的任何位置时，如何隐藏下拉菜单？(javascript)
javascript、html、css
我想让它，所以当你点击任何地方的网页，它隐藏下拉菜单，我想要一个动画，当下拉打开和关闭。我试过多种方法，但都没有用。我想让它，所以当你点击任何地方的网页，它隐藏下拉菜单，我想要一个动画，当下拉打开和关闭。我试过多种方法，但都没有用。
以下是整个代码：
Javascript：
function Dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
event.stopPropagation = function(event) {
if (!ev
浏览 6提问于2022-07-21得票数 0
我试图显示下拉菜单项，但当我将光标悬停在菜单项上时，整个导航栏都在扩展。我试过使用位置:绝对和相对。 <nav class ="navbar">
<div class="menu-bar">
<div class="dropdown">
<li class="dropbtn" style ="list-style: none" >Know us</li>
<div class="dropdown-content"
浏览 18提问于2020-06-30得票数 0
1回答
如何格式化带有粘性导航栏的下拉菜单(无jQuery)
css、html
我正在尝试建立一个带有粘性导航栏的个人网站，其中一些项目下也有一个下拉菜单。导航栏“卡住”，但下拉菜单不会出现。我发现问题围绕着将下拉内容的位置设置为绝对，以及创建“导航栏”的ul的溢出设置为隐藏。(附言:我是CSS的新手，所以我提前道歉)。 到目前为止，我已经尝试将下拉内容的位置更改为"fixed“，但这只有在您向下滚动之前才能正常工作。一旦你向下滚动(作为方面)，它仍然保持相同的距离向下，并且不会调整到导航栏的新位置。此外，我已经将导航栏的溢出更改为可见。下拉菜单正常工作，但导航栏的格式完全混乱。从本质上讲，所有这些更改都使问题变得“更好”，但只会带来新的问题。 ul {
浏览 16提问于2019-02-14得票数 2
回答已采纳
3回答
尝试用下拉菜单修复导航栏到页面顶部
javascript、html、css
我正试图在我为一个类制作的web应用程序中添加一个导航栏，我想在其中使用下拉菜单(包含的东西太多了，不能直接将所有内容都放在一边)。
我想把条子固定在页面的顶部，但是当我输入position: fixed;时，下拉菜单就停止工作了。有办法绕过这件事吗？我只是把position: fixed;放在了错误的位置，还是与下拉内容position: absolute;可能.冲突？
(我对网络很陌生，所以如果你看到任何我可以更改/批准的东西，请告诉我！非常感谢)
ul {
list-style-type: none;
margin: 0;
top: 0;
position: fixe
浏览 0提问于2019-05-10得票数 2
回答已采纳
3回答
未显示简单的HTML / CSS下拉NavBar
javascript、html、css
我是编程领域的初学者，我在导航栏中制作了一个下拉菜单，但它没有显示，我实际上可以在几个像素上单击下拉菜单中的第一个链接，就好像它就在那里，但有什么东西不能被看到：
Css：
li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropb
浏览 4提问于2017-05-18得票数 3
1回答
悬停下拉菜单和列表
html、css、menu、html-lists、navbar
我目前正在尝试使用列表创建一个垂直导航栏，但是当我在ul上悬停时，所有的li下拉菜单都会出现，或者它们根本就不会出现，我遇到了一些问题。有解决办法吗？
HTML：
<body>
<div class="navbar">
<ul>
<li>title</li>
<li>main text</li>
<div class="dropdown-content">
浏览 2提问于2016-05-08得票数 0
回答已采纳
1回答
：html和css中的悬停用法
html、css
谁能告诉我在哪里可以使用:hover？在最后一行CSS中，它是.dropdown:hover .dropdown-content，当我将鼠标悬停在dropdown元素上时，它会给我一个下拉菜单。
但是，如果我使用.dropbtn:hover .dropdown-content，则不会显示下拉菜单。为什么会这样呢？
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
di
浏览 0提问于2018-07-27得票数 0
1回答
带下拉菜单的响应式导航栏
html、css
我想实现内联右侧导航栏与下拉。当屏幕很小时，我隐藏了所有的菜单和显示按钮。单击按钮时，我会显示垂直导航栏。 在媒体查询中，我不知道如何隐藏和显示下拉菜单。在媒体查询中，我可以隐藏下拉菜单，但无法再次显示它。 这是我的代码。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<
浏览 17提问于2021-04-28得票数 0
1回答
SVG隐藏的导航栏
css、svg、plotly
我有一个导航栏，其中有一个包含下拉内容的元素。导航条形码来自w3schools站点。()在菜单下面，我巧妙地添加了一个SVG，它隐藏了下拉内容。
是否有办法使导航栏在顶部(包括下拉内容)？
(我已经证实，删除SVG后，下拉内容是可见的)
下面是示例代码：
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
浏览 1提问于2016-07-20得票数 0
回答已采纳
6回答
如何使html中的下拉列表与另一个div重叠
html、css
因此，我有一个导航栏和一些项目，有一个下拉菜单，当你悬停在他们上面。在导航栏的下方，有一张幻灯片显示的图像。问题是，每当我在下拉菜单上悬停时，幻灯片显示的div就会妨碍到下拉菜单的出现。
我有ff html代码
<div class="dropdown">
<li class="dropbtn">About Us</li>
<div class="dropdown-content">
<a href="#"> Overvi
浏览 8提问于2016-10-15得票数 4
回答已采纳
1回答
带有下拉菜单的响应式导航栏，在下拉菜单下方滑动
html、css
我正在尝试用下拉菜单制作响应式导航栏。我希望下拉菜单打开垂直(幻灯片)下拉菜单容器。我尝试了一些东西，但没有达到我想要的效果。我想把“谷歌像素2”和"LG V30“幻灯片上的”我们是谁“和”我们做什么“放在一起。
.navbar {
background-color: #31577C;
overflow: hidden;
width: 100%;
}
ul {
font-family: Arial;
text-shadow: 0px 0px 20px black;
list-style-type: none;
margin: 0 auto;
浏览 12提问于2018-01-15得票数 0
回答已采纳
2回答
如何解决这个问题并添加多个下拉列表？
html、css
我对编码很陌生，我正在努力学习。这是我的问题。我想做一个顶部导航栏，但由于内容，我需要“一个以上”下拉。
我正在学习使用w3school --他们的例子很好，我尝试过添加其他选项，但是，它不尊重CSS。为什么？我不明白：
我是一个非常新手，我一直在寻找，但也许我的错误很小，我不知道“确切的”，我需要寻找。所以如果答案已经发布了，请原谅。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
浏览 2提问于2016-08-28得票数 0
回答已采纳
1回答
修复导航栏，但下拉菜单不再可见
html、css、drop-down-menu、navigationbar
我正在创建一个带有下拉菜单的固定导航栏。不幸的是，当工具条固定时，下拉菜单是不可见的。我想在必要时滚动页面，但导航栏必须始终可见。我已经看过几篇关于这方面的文章，但没有一个解决方案对我有效。
下面的代码运行得很好，但是当删除/*position: fixed;*/周围的注释标记时，问题就出现了。
问候
p {
font-family: Arial, Times, serif;
}
ul {
list-style-type: none;
font-family: Arial, Times, serif;
margin: 10;
padding: 0;
overflow
浏览 13提问于2017-02-03得票数 5
回答已采纳
1回答
导航栏中我的下拉按钮的字体是其他字体而不是其他标题
html、css、navbar
所以我做了这个导航栏，上面有一个标题，是一个下拉菜单。此标题的字体与其他标题不同。如果您将鼠标悬停在此下拉菜单上，则链接确实具有正确的字体。有人能帮我一下吗？
/* Navbar */
.topnav {
list-style-type: none;
overflow: hidden;
background-color: #363636;
box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
transition: all .2s ease-in;
浏览 4提问于2020-03-09得票数 0
回答已采纳
1回答
我试图创建一个电子商务商店使用下拉菜单，以便于导航，但似乎不能创建一个超级子菜单在我的导航栏内的电子液体选项卡，我如何不使用li或ul标签线？
我已经尝试了当前的代码显示，然而，新的下拉内容商店中的电子液体现在是不断可见的。
我也尝试过实现li标记，但是它不粘在导航栏上。
.navbar {
overflow: hidden;
background-color: rgba(0, 0, 0, 0.0);
}
.navbar a {
float: left;
color: white;
text-align: left;
padding: 14px
浏览 0提问于2019-09-02得票数 0
1回答
CSS相邻兄弟姐妹分解下拉菜单边距
html、css
我试图实现一个CSS下拉菜单，基于这个来自的w3schools。它正在工作，但是dropbtn类周围的左边距与简单导航链接的左边距不一样(主页，新闻)。当您从一个列表项移到另一个列表项时，实现下拉菜单的项在左侧有一个黑色边框，我无法解释。
当我试图使用li+li:before实现项目之间的分隔符时，这个行为就开始了，如所示。
default.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sty
浏览 0提问于2017-01-05得票数 0
回答已采纳
4回答
下拉菜单不会用CSS显示
html、css、menu、navigation、dropdown
我跟踪这个来自weSchools的weSchools，在我的导航栏中创建一个下拉菜单。
我的问题是，除非我将CSS属性overflow: hidden从ul类中删除，否则它不会显示。这破坏了页面的布局，并移除背景色等。
我尝试过打开/关闭display: block，但是下拉菜单并没有出现，就像w3school教程一样。
我认为在CSS中使用自定义类.sticky而不是直接使用ul可能有问题，它是继承还是不继承？
这是我的HTML/CSS。我已经多次研究过它，以便与w3schools示例进行比较，除了ul标记之外，找不到其他的区别。如果我从.sticky导航列表中删除ul，那么它将丢失格式并影
浏览 6提问于2020-07-01得票数 0
回答已采纳
1回答
导航栏中下拉菜单列表中的第二列
html、css
嗨，我制作了一个带有导航栏的网页。导航栏上有鼠标悬停下拉菜单。我已经从w3school网站获取了这个导航栏的代码。代码是
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text
浏览 2提问于2018-07-04得票数 0
回答已采纳
2回答
在css文件中给导航条指定一个固定位置后，导航条的奇怪行为
html、css
我用下拉菜单制作了一个导航栏，一直工作正常，直到我在css文件中添加了"position: fixed;“语句。一旦我这样做，下垂不是出现在鼠标悬停在指定按钮上，就是出现在屏幕上。注意，根据颜色的变化，父按钮对鼠标悬停有很好的反应，这就是为什么我认为下拉菜单即将从屏幕上下来的原因。
编辑:我意识到下拉列表出现在ul元素中，我可以在其中滚动以查看列表。它不是显示在页面内容上的实际下拉列表，而是在导航栏本身中出现的。
这是我的密码：
ul.navbar {
overflow-x: hidden;
list-style-type: none;
margin: 0;
pad
浏览 1提问于2017-06-08得票数 0
回答已采纳
1回答
悬停下拉菜单显示在左侧，而不是直接位于链接锚点的正下方
html、css
这可能很容易弄清楚，但当鼠标悬停在Links元素上时，下拉菜单会显示在左侧，而不是在悬停在Links锚点下方时垂直下拉。谢谢。
CSS
ul {
}
li a,
.dropbtn {
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9
浏览 6提问于2016-07-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
