HTML & CSS -如何创建下拉菜单？
要创建下拉菜单，可以使用HTML和CSS来实现。下面是一种常见的方法：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>
</body>
</html>CSS部分：
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}上述代码中，我们创建了一个包含下拉菜单的<div>元素，并使用CSS来定义下拉菜单的样式。.dropdown类设置了position: relative;和display: inline-block;，使其成为一个相对定位的内联块元素。.dropdown-content类设置了display: none;和position: absolute;，使其默认隐藏并以绝对定位的方式出现在按钮下方。当鼠标悬停在.dropdown元素上时，通过设置.dropdown:hover .dropdown-content的display: block;，使下拉菜单显示出来。
你可以根据需要修改下拉菜单的样式和内容。这只是一个基本的示例，你可以根据自己的需求进行扩展和定制。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
我正在创建一个使用HTML5和CSS的网站。我正在尝试创建一个下拉菜单，我有代码。但是，我的代码只是生成一个下拉菜单。如何添加" go“按钮，以便当选择一个选项并按下go按钮时，将输出一个与下拉菜单值相关的答案。
例如，我有：
<!DOCTYPE html>
<html>
<head>
<title> My Project</title>
</head>
<body>
<select>
<option va
浏览 5提问于2014-04-09得票数 2
回答已采纳
我已经用html&css创建了自己的下拉菜单。所以，任何人都可以指导我如何，我可以添加我自己制作的下拉菜单到我自己的自定义WordPress主题？我不想使用任何插件，因为它不会给我提供与我自己的下拉菜单相同的外观。
提前谢谢。
浏览 6提问于2013-08-18得票数 0
回答已采纳
3回答
我正在尝试创建一个页面，您的用户必须做出多个选择，这些选择是基于彼此的。如何创建一个窗体，以便根据用户在下拉菜单#1中的选择显示特定类型的下拉菜单#2。
例如，假设用户必须选择“产品类别”和“产品子类别”。如果用户从第一个下拉菜单中选择“卧具”，则会自动出现第二个下拉菜单，其中包含“床、床垫、枕头”等选项。
为了进一步说明这个例子，假设用户选择了“电子产品”而不是“床上用品”。然后第二个下拉菜单将会有像“电视，mp3播放器，电脑”这样的选项。
怎么去做这样的事情呢？它是你会在HTML/CSS或其他形式中做的吗？
谢谢你的帮助！
编辑-我正在使用Django / Python以及HTML、CSS
浏览 1提问于2012-08-03得票数 7
回答已采纳
3回答
我想问关于html下拉菜单的问题。如我们所知，html中的选项标签只支持文本。然而，我需要创建一个显示图像列表的下拉菜单。我已经找过了。我找到了几种方法，包括使用css或jquery。然而，这不是我想要的。下面是我想要创建的内容：
<option value = blablabla><img src = "img/blbalba.txt"></option>
上面的代码不起作用。有没有像那样显示下拉菜单的建议？
谢谢你的帮助。
浏览 0提问于2013-07-09得票数 0
我通过这个网站的创建了一个下拉菜单。最终的代码压缩文件包含一个.html文件、一个.css文件和一个.js文件。如何将其放在标题下？
浏览 1提问于2014-07-27得票数 0
我使用jQuery ThemeRoller生成JS/CSS：
但是，当我编辑提供的index.html文件并更改时：
$( "#selectmenu" ).selectmenu();
至
$( "#selectmenu" ).selectmenu({style:'popup'});
在Chrome中测试index.html文件，选择菜单是‘下拉菜单’，而我想要的是‘弹出’样式。
我创建了一个链接到CDN托管的.js和.css文件的.css。
如何使选择菜单具有弹出样式(以选定选项为中心的菜单)而不是下拉样式(菜单总是从第一个选项下拉)？
浏览 3提问于2016-04-05得票数 0
回答已采纳
我想知道是否有人能让我知道如何在Jade中创建下拉菜单，同时使用Twitter引导。我现在有一个菜单，菜单上堆满了nav药片：
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/css/bootstrap.min.css')
include inc/header
body
h1.page-h
浏览 0提问于2013-07-31得票数 1
回答已采纳
1回答
我创建了一个下拉菜单使用CSS和HTML。
当我在子菜单链接上悬停时，我想要的是导航菜单项回到蓝色。例如，当我悬停在Resources1标题下的Resources标题下时，我希望Resources字体更改为蓝色。
JSFiddle：
有人能告诉我如何使用CSS来完成这个任务吗？
浏览 1提问于2014-05-21得票数 1
回答已采纳
我试图使一个下拉菜单使用HTML和CSS只。我的页面上有一组链接/按钮(任何人都可以)。当我点击它们时，我想要一个3级的下拉菜单显示出来。所以当我点击它们时，所有的链接都会有这个功能。
我知道如何使用jquery完成此操作，但我想知道如何仅使用HTML和CSS来完成此操作。
谢谢!
浏览 1提问于2014-02-04得票数 0
1回答
我想创建双下拉菜单，我使用的是html+css。理想的菜单应该是这样的:当鼠标悬停在"People“上时，会出现第一个下拉菜单，其中包括"Presenter”、"Staff“和"Student”。然后鼠标悬停在"Presenter“上会出现第二个下拉菜单"PresenterA”，悬停在"Staff“上会出现第二个下拉菜单"StaffA”"StaffB“"StaffC”。问题是:我做了第一个下拉菜单，没问题，但当我做第二个下拉菜单时，出现了问题。我试了一次又一次，但还是错了。我认为css中的.popup和.popup
浏览 1提问于2015-03-03得票数 0
1回答
我想要创建一个下拉菜单与子类别使用R-如何是一个子类别应该介绍？
`if (interactive()) {
ui <- fluidPage(
selectInput("variable", "Variable:",
c("HTML Code tester", "Font Styler", "CSS3 Generator", "Box Shadow", "Border Radius"))
)
server <- function(inpu
浏览 4提问于2016-11-12得票数 3
回答已采纳
2回答
我正在尝试为我正在工作的网站创建一个下拉菜单。它应该是简单的编码，因为它是在Html和CSS上，但我所做的不工作。当我将鼠标悬停在应该激活下拉菜单的文本上时，它根本不会显示出来。 HTML <div class="dropdown-menu" id=" el_pepe">
<ul class="nav navbar-nav">
<li> @Html.ActionLink("maderas", "Productos", "tblProductos")
浏览 16提问于2021-07-20得票数 0
1回答
表格显示项php
、、、
我试图创建一个具有下拉菜单的网站，其代码如下：
<form>
<select name="languages">
<option></option>
<option value"html">HTML</option>
<option value"css">CSS</option>
<option value"js">JavaScript</option>
<opt
浏览 10提问于2016-08-21得票数 0
回答已采纳
2回答
我为我的Wordpress网站创建了一个下拉菜单。在这个jsfiddle中，您可以找到HTML和CSS代码：
see jsfiddle
我有一个CSS的问题。我创建了下拉菜单，但当我悬停在“菜单项一”上时，它会伸展并获得更大的宽度。这是不应该的。子菜单项可以更大，但菜单项本身不应更改大小。此外，当我悬停菜单时，它周围到处都是黄色的背景，我想删除它。
浏览 2提问于2013-04-25得票数 0
回答已采纳
下午好,
我目前的任务是为一个网站创建几个样式表。其中一个网站的风格需要我创建一个下拉菜单，但我不允许更改的HTML代码，所以基本上我被要求创建一个下拉一样的菜单只与CSS。
下面是我必须以下拉菜单的形式显示的HTML代码：
<div id="global-nav">
<ul>
<li><a href="#products">Products</a>
<ul>
<li><a href="#widgets">Widgets</a>&l
浏览 0提问于2011-11-16得票数 5
回答已采纳
1回答
有没有办法找出HTML的某些元素使用的是什么脚本？
例如，如果我想找出创建下拉菜单所用的脚本，我知道如何找到菜单的HTML和CSS，但不知道JavaScript (或使用的任何脚本)。
我正在使用Web Developer chrome扩展来获取我感兴趣的页面的JavaScript，但是这些都是很大的文档，我如何知道哪些函数/变量/等链接到HTML的哪一部分？
浏览 1提问于2015-07-11得票数 1
4回答
有人能给我解释一下CSS下拉菜单是怎么工作的吗？
我见过很多的，大多数都有>选择器，
我的问题是：
如何使用>选择器创建CSS下拉列表？
我查阅了很多教程，但始终不明白>做了什么，以及它如何与HTML类\Ids连接。
有人能给我解释一下吗，一部分一部分？谢谢。
浏览 4提问于2012-09-14得票数 3
回答已采纳
我正在尝试将一个下拉菜单放在我使用HTML创建的文本框中，但我不知道如何对其进行编码。
我找到了一种将图像放置在文本区域内的方法，但没有下拉菜单。
$('input:text').css('background','#fff url(images/back.png) center right no-repeat');
我的想法是在搜索框中放置下拉菜单，这样用户就可以选择搜索的类别。例如:音乐，视频，图片。但是选择下拉菜单应该在搜索框中。
我的下拉菜单代码是
<li class="dropdown">
浏览 9提问于2013-03-29得票数 0
回答已采纳
我是HTML/CSS的新手，我还在学习。
我刚刚创建了一个下拉菜单按钮，这是代码
如您所见，导航菜单只有“男装”按钮和下拉菜单。
我试图复制这段代码，并在“男装”按钮旁边设置第二个下拉菜单按钮。
问题是，当我复制“男装”按钮的代码时，第二个按钮不会对齐“男装”按钮，而是显示在下面。
这就是我想要实现的目标：
浏览 2提问于2014-02-27得票数 0
回答已采纳
1回答
嗨，我正在用HTML/CSS做一个普通的下拉菜单；也就是，使用ul li和嵌套的ul作为下拉菜单。
我想让下拉菜单在导航栏下面稍微偏移一点，就像在中一样。当我在顶部链接和下拉菜单之间移动光标时，我不知道如何在保持下拉菜单可见的情况下做到这一点。
任何帮助都是非常感谢的。
浏览 2提问于2011-11-16得票数 1
回答已采纳
我以前经常把所有的东西都放进application.css里，它起了作用。但是现在我想在我的应用程序和css中使用一些不错的下拉菜单，因为它是huuge。因此，我只为application.css所在文件夹中的下拉菜单创建了一个新的css文件:样式表。
现在rails似乎没有加载新创建的css文件。如何使它加载文件夹中的每个文件？
浏览 6提问于2014-01-17得票数 0
回答已采纳
我正在用WinJS在Windows Metro中创建一个页面。我有一个DatePicker JavaScript对象，它是HTML中一个基本的选择/选项下拉列表。我已经知道如何CSS它的每个部分，除了突出显示的颜色所选项目，一旦你点击下拉菜单。无论我针对的是css类还是伪元素，我都无法获取该元素。它始终保持默认的Windows 8紫色。
假设下拉菜单是.myDropdown。我试过了
.myDropdown select //styles pre-clicked select element
.myDropdown::-ms-value //styles pre-clic
浏览 0提问于2012-10-26得票数 3
回答已采纳
我用多种方式创建了下拉菜单: Javascript、Dreamweaver Spry、CSS。当使用我的中级安全IE6进行测试时，它们都不起作用。IE6向我发出了安全警告。
我试着用IE6打开其他网站，它们的下拉菜单也不起作用。
然后我发现这个网站：
它的Javascript/ jQuery下拉菜单工作，而其他网站不工作。
它是否使用黑客绕过IE6安全性？如何使我的下拉菜单工作？我不想用"noscript“标签。
我使用的代码是：
(1) CSS下拉菜单：
(2) Javascript下拉菜单：
浏览 3提问于2011-02-21得票数 0
我想在不使用jquery的情况下创建引导下拉菜单
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
&
浏览 0提问于2016-03-16得票数 2
2回答
我的输入框中有一个下拉菜单。当文本变得非常长时，文本和下拉文本重叠。使用css，如何确保无论文本有多长时间，下拉文本和文本都不会重叠？
当前产出：
期望产出：
用于输入框的HTML和css：
下拉列表的HTML和CSS：
浏览 3提问于2016-02-07得票数 1
2回答
我想要达到的效果：
在Twitter的新设计中，他们为账户设置区域实现了一个“粘性”下拉菜单。
基本上，当您在顶部的黑色全局导航栏中单击您的用户名时，将打开一个菜单并保持打开状态，直到您单击其中一个链接或再次单击您的用户名来关闭它。
我想要实现完全相同的效果，一个粘性的菜单，只有CSS和HTML。我不介意使用CSS3特性，但是如果不依赖CSS3就能实现这一点，那就更好了。
我到目前为止尝试过的
我可以创建带有下拉菜单的基本导航菜单，使用的是纯CSS和HTML，但只能使用:悬停伪类。我尝试了:活动伪类，但不幸的是它没有“坚持”并保持打开状态。
如果不依赖javascript，这种“粘滞”的下拉式
浏览 7提问于2010-09-28得票数 3
3回答
我正在创建一个CSS响应网站。
如何在移动屏幕分辨率下隐藏下拉菜单？让它再次出现在更大的分辨率上？(我是jQuery的新手)
这是我的html：
<div id="menuContainer">
<ul id="menu">
<li id="about">
<a href="about.html">About</a>
<ul class="dropdown">
&l
浏览 3提问于2013-03-21得票数 0
回答已采纳
上下文:我试图创建一个简单的项目(决策树)，我想知道如何创建下拉菜单，以便用户可以选择特定的选项并从json文件中检索输出。
这是HTML代码：
decisiontree.create(
window.location.href.replace(/\/.*\.html$/, 'coronary.json'),
document.getElementById('output'),
document.getElementById('status')
);
<!DOCTYPE HTML PUBLIC "-//IETF//D
浏览 3提问于2022-01-18得票数 0
回答已采纳
1回答
Flash中的下拉菜单
、、、
使用Haxe创建闪存下拉菜单的常见方法是什么？
我用过各种各样的下拉菜单：
Forms<select>中的拖放“组合框”( C# UIPickers in iOS )
现在我想在Flash中创建类似的东西。注意，对于超出我控制范围的每个需求，我没有使用Flex。
我对Flash很陌生。到目前为止，看起来我将扩展Sprite，并可能使用一些HTML/CSS来进行样式设计。
浏览 0提问于2012-03-13得票数 0
回答已采纳
2回答
如何使下拉菜单向上扩展而不是向下扩展？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script s
浏览 1提问于2019-04-17得票数 0
HTML，JS，CSS。我正试图为一个使用输入值、输入小费数量(从下拉菜单)和输入客户数量(也来自下拉菜单)的餐饮计算器编写代码，然后计算(startPrice * tipAmount + startPrice/peopleEating)并打印结果。
问题是，我不知道如何使用这些下拉菜单的输入值来计算和打印结果。有人能给我一个简单的解释吗？
谢谢。
浏览 3提问于2021-02-17得票数 0
2回答
我在用HTML&CSS创建下拉菜单时遇到了问题。我记下了HTML部分(我想)。
<div id="Nav">
<ul>
<li class="Navigation"><a href="" class="Nav_Text">Item 1</a></li>
<li class="Navigation"><a href="" class="Nav_Text
浏览 6提问于2015-07-28得票数 1
回答已采纳
所以我现在有一个带有管道分隔符的下拉列表，比如So => Home | About | Tab3
CSS看起来像这样：
.navigation li a:after {
content: " | "; }
我将鼠标悬停在下拉菜单上，但问题是当它改变颜色时，它会包含带有顶层下拉菜单的|竖线。下拉菜单是标准的下拉菜单CSS：
.multi-column-dropdown li a {
display: block;
clear: both;
color: #eee;
white-space: n
浏览 1提问于2015-04-22得票数 0
2回答
下拉列表重定向-提交
、、、、
我正在使用wordpress，我想创建一个带有选择选项的下拉菜单，我找到了这个线程，我认为这正是我需要的，老实说，我不知道如何设置这些元素html，js，css以达到效果。我是一个乞讨者，我将感谢任何种类的指示。感谢您的宝贵时间！
浏览 1提问于2014-10-15得票数 0
2回答
通过d3 SVG下拉菜单
、、、、
我卡住了。我想在我使用d3创建的SVG图表上添加一个html下拉菜单。当前下拉菜单显示在图表下面，但我希望下拉菜单出现在图表上的特定位置。
我不清楚我的问题是浏览器呈现所有元素的顺序，还是仅仅是CSS问题。
任何帮助都将不胜感激。
这是我的html：
<div class="chartArea">
<select class = "demoSelection"></select></div>
这是我的css：
.chartArea{
position: relative;}
.demo
浏览 5提问于2015-11-14得票数 3
回答已采纳
我有这个简单的表单，我想能够用css设置下拉菜单的样式。
input_html: { class: "form-dropdown" }不会改变风格。如何才能正确地将类添加到简单表单collection_select中以在css中设置样式，或者是否有其他方法可以设置下拉菜单的样式？
这是我的简单表单：
<%= simple_form_for @document do |f| %>
<%= f.collection_select :category_id, Category.all, :id, :name, {promt: "Choose a c
浏览 25提问于2016-08-17得票数 0
回答已采纳
3回答
我需要有下拉菜单项的主菜单。因此，当用户悬停菜单项时，将显示下拉菜单。CSS和:hover选择器已经做到了这一点。但是，通常当:hover丢失(鼠标移到菜单项元素之外)时，相应的下拉列表也会消失。但我需要的-菜单仍然可以看到，只有在点击时才会消失。
这种效果的一个例子是：
但是，我不知道是哪种CSS或JS创建了这种效果，所以我不能在这里添加snipper (如果可以，我不会问)。在这个特定的示例中，当您悬停菜单项"Pages“时，下拉菜单会出现，但当:hover丢失时，下拉菜单不会消失。它会一直留在那里。我找不到是什么造成了这种效果--是JS还是CSS？
HTML：
<ul c
浏览 0提问于2016-09-07得票数 1
2回答
我正在使用HTML/CSS来创建我的投资组合，我想要一个下拉菜单和我的证书(图片下面供参考)。
这可能是一个很明显的答案，但谁能帮我解决这个问题。
浏览 0提问于2021-11-24得票数 1
回答已采纳
2回答
我正在尝试制作一个下拉菜单，没有任何图像，纯CSS和HTML，如下所示：
我不能做的是在顶部做这个三角形的装饰
在CSS中可以吗?如果可以，如何实现？
浏览 0提问于2013-03-08得票数 4
回答已采纳
我正在制作一个页面，用户可以通过下拉菜单更改页面上的几个外观/样式，这会更改css文件名。我已经设法通过下拉菜单更改样式表，但现在我想将当前的css文件保存在本地存储中。例如，如果用户更改为样式表3.css(通过下拉菜单)，则此样式/外观将在下次用户访问页面时设置。这是我的代码：
HTML：
<link id="myStyleSheet" href="stylesheet1.css" rel="stylesheet" type="text/css"> I put an id in stylesheet
<div
浏览 3提问于2015-05-17得票数 2
回答已采纳
1回答
我想添加一个输入图像按钮到我的html，当点击时，将给出一个下拉菜单与三个输入范围栏(输入类型=“范围”)。我如何使用html，css，javascript来做这件事？
浏览 2提问于2015-03-18得票数 0
我正在尝试在CSS中创建一个下拉菜单，并在Django中获取所选选项的值以进行处理。我如何才能做到这一点呢？我尝试使用textbox HTML编写代码，可以使用request.get函数获取数据，但是如何使用CSS下拉菜单来实现这一点呢？
示例CSS (W3学校)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<bod
浏览 2提问于2017-03-12得票数 0
2回答
我有一个下拉菜单，它是JavaScript应用程序的一部分。它是在一个单独的CSS文件中设置样式的一行按钮的一部分。下拉菜单创建一列按钮，其样式应与原始行相同。
我需要下拉菜单中的按钮来响应相同的:悬停CSS作为行，但我有麻烦，因为鼠标必须按下才能看到下拉菜单。我可以从CSS中提取规则，并将它们写入JS，如下所示：
jQuery(texDiv).mouseover( function() {
this.style.color = '#000000';
});
但是，我更喜欢以某种方式引用:hover CSS规则，以便它只在代码中的一个位置编写。我可以
浏览 0提问于2013-06-05得票数 3
回答已采纳
3回答
我使用的是纯css下拉菜单。但单击菜单项后，将始终显示下拉菜单。当我把我的鼠标从菜单中拿出来时，它将被隐藏。如何在单击菜单项后关闭纯css悬停下拉菜单？谢谢你的建议。下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
ul{
浏览 4提问于2016-05-19得票数 4
回答已采纳
以下函数适用于文本输入。如何为下拉菜单(select)创建类似的效果？
$('input').focus(function(){
$(this).css('opacity',1);
});
$('input').focusout(function(){
$(this).css('opacity',0.6);
});
浏览 0提问于2011-06-03得票数 0
1回答
下面的标记在Bootstrap 4中工作。
<div class="dropdown">
<span type="button" class="dropdown" data-toggle="dropdown" data-boundary="viewport">
<img src="~/images/menu.png" title="Menu" />
</span>
<div class=&#
浏览 8提问于2022-05-17得票数 2
1回答
我想在我的下拉菜单中实现以下效果，只使用CSS和HTML？
基本上的想法是，当鼠标移出下拉菜单时，它会一直打开，直到你在菜单外单击或X秒后。有没有可能在没有任何额外的库或技术(除了CSS和HTML)的情况下实现这一点？
浏览 2提问于2017-07-04得票数 1
所以我决定创建一个有两种语言的网站。我创建了两个文件夹。一个文件夹用于英语，一个文件夹用于西班牙语。其结构如下：
img
css
js
en/home.html
es/home.html
当用户选择从下拉菜单中更改语言时，他将被重定向到相应的文件夹。然而，当访问/en/home或/es/home时，css中的内容，js和img文件夹不会加载，因为网站正在搜索错误的目录。例如，它正在搜索/en/css/custom.css，这当然不存在。
我怎么才能改变呢？
浏览 2提问于2016-04-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
