如何让下拉内容100%？
要让下拉内容100%，可以通过CSS样式来实现。下面是一种常见的方法：
- 首先，确保下拉菜单的父容器具有相对定位（position: relative）的样式。
- 设置下拉菜单的样式为绝对定位（position: absolute），并将其宽度设置为100%（width: 100%）。
- 确保下拉菜单的父容器具有足够的高度，以容纳下拉菜单的内容。
- 设置下拉菜单的顶部位置为100%（top: 100%），这将使下拉菜单显示在父容器下方。
- 如果需要，可以使用其他CSS属性来调整下拉菜单的样式，如背景颜色、边框等。
下面是一个示例代码：
HTML:
<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>CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #f1f1f1;
color: black;
padding: 10px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
top: 100%;
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding: 5px;
}
.dropdown:hover .dropdown-content {
display: block;
}这样，当鼠标悬停在下拉菜单按钮上时，下拉菜单会以100%的宽度显示在按钮下方。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，建议您参考腾讯云官方文档或网站，查找相关产品和介绍。
相关·内容
2回答
我有一个带有CSS下拉导航菜单的网页。我的问题是，当我将鼠标悬停在菜单顶部以显示下拉菜单时，页面中的其他所有内容都会移动，以便为下拉菜单腾出空间，而不是让下拉列表移动到其他所有内容上。我的导航链接在一个id为"header“的div元素中，该元素的CSS如下所示：
#header {
width: 100%;
z-index: 100;
position: relative;
}
页面中正在移动的元素都不在页眉内，也没有指定z索引。有人能告诉我我哪里做错了吗？
浏览 4提问于2011-07-16得票数 0
回答已采纳
3回答
我已经做了一个简单的下拉菜单，这很好用，但我想在按钮和下拉菜单之间添加一些空间(在底部按钮/链接和顶部下拉菜单之间)。
问题是，如果我不在按钮和下拉菜单之间添加空格，它可以正常工作，但一旦我在它们之间添加空格，下拉菜单就会在我离开按钮时返回隐藏状态。
我可以让li在hover上变高，但是li有样式，所以我不能做很多事情(a元素也有固定的样式)。
那么，如果我悬停它的父级li，下拉菜单之间留有空格，我该如何保持下拉菜单的活动状态呢？
jQuery代码
$('#sub-menu li').hover(function(){
$(this).children(
浏览 1提问于2011-05-25得票数 0
回答已采纳
2回答
我有一个下拉列表和一个“多个”下拉列表，如下所示
@Html.DropDownList("process", Model.Processes, new { placeholder = "-- select --", style = "width: 100%", multiple = "multiple" })
@Html.DropDownList("products", Model.Products, new { placeholder = "-- select --", style = "
浏览 1提问于2015-09-22得票数 1
我有一个网页，其中包含许多过滤器和一些作为下拉选项。例如，名为(Time Range--选项过去24小时、全部、过去7天)的过滤器。
该网页假定由100个用户同时打开，并从时间范围下拉列表中选择一个选项)。
请让我知道如何在同一时间找到100个用户的持续时间，并从时间范围下拉列表中选择一个选项。
提前谢谢。
浏览 6提问于2019-02-13得票数 0
如何在下拉列表中选择"Last“选项值
找到html代码，此下拉框项根据网格中的记录大小动态生成
<select id="CPHRegContent_ddlPageSize" onchange="return ddlPageChange();"name="ctl00$CPHRegContent$ddlPageSize">
<option value="25">25</option>
</select>
有时它可能有3个项目
<select id="CPHRegC
浏览 0提问于2014-06-18得票数 0
我目前正在为一个项目使用Dynamic Data Linq to SQL。我想知道是否有一种方法可以更改GridView页面上显示的项目数的可用选项。目前“每页结果数：”下拉列表只给我5，10，15和20个选项。我想添加50和100个选项，以显示每页50或100个项目。
GridView控件使用GridViewPager控件生成分页控件/下拉列表。例如，我可以将GridView的PageSize属性设置为50，并让每页显示50个项目，但是如何更改GridViewPager以让用户选择50或100这两个额外的选项呢？
浏览 1提问于2010-08-05得票数 2
回答已采纳
2回答
如何让内容从iframe中弹出？
、、、、
假设我有一个菜单，它的初始尺寸是200px * 100px。我需要将它包含在iframe中，但问题是它是一个下拉菜单，当它打开时，菜单被剪切掉，因为它在框架内。有没有办法让它从画面中消失？
浏览 0提问于2011-06-25得票数 1
1回答
我已经创建了一个固定的100%宽度的导航栏，它横跨在页面的顶部；唯一的问题是，当页面调整大小时，我无法让下拉菜单标题保持居中，或者，就这一点而言，根本不能……他们现在漂浮在左边。
这是和。
到目前为止，我尝试过的所有操作都打破了菜单标题的下拉菜单附件。
谢谢你的帮助
链接
浏览 2提问于2011-12-20得票数 2
回答已采纳
1回答
我有一个边栏菜单与下拉和一个很长的名单，需要一个滚动。
我遇到的问题要么是滚动条离开了屏幕，要么是由于overflow: hidden;而隐藏了下拉列表，或者两者兼而有之。
这是我的CSS：
/* I want dropdowns to be on the left */
.dropdown-menu {
top: 0;
left: -160px;
}
#rightbar {
position: fixed;
right: 0;
height: 100%;
background: lightgray;
width: 300px;
}
/
浏览 1提问于2015-10-22得票数 0
回答已采纳
我正在Vue3中创建一个名为“下拉”的组件。
下拉组件依次使用其他组件:来自headlessui/vue库的菜单、MenuItems、MenuItem和MenuButton。
我的想法是，您可以将任何内容放入下拉中，这就是为什么我创建了一个名为#contentdropdown的槽。
问题是，当我将这个插槽内容传递给下拉组件时，Vue会给出以下错误：
< MenuItems />缺少父< Menu />组件
这是我的下拉组件代码：
<template>
<Menu as="div" class="relative inline
浏览 1提问于2022-06-30得票数 1
2回答
所以简单地说，我有下面的代码在网页上与VLC流rtsp。让脚本根据用户更改rtsp地址是否太复杂(比如右键单击视频并从下拉列表中选择另一个rtsp地址)？
embed type=“应用程序/x-vlc-plugin”pluginspage="“version="VideoLAN.VLCPlugin.2”width="100%“height="100%”id="vlc“loop="yes”autoplay="yes“target="rtsp://192.168.1.225">
谢谢你的帮助。
浏览 36提问于2013-12-31得票数 0
1回答
下拉对齐问题？
、、、
<s:form id="inputThresholdForm" name="inputThresholdForm"
theme="simple">
<table border="0" class="display-table" cellspacing="2"
cellpadding="2" height="100%" width="100%">
<tr>
浏览 2提问于2014-01-06得票数 0
我想知道如何设置节点形式所需的“语言选择器下拉”？
我试图通过hook_form_alter实现这一点，但是$form“语言”似乎不是在这个钩子中创建的！
有什么钩子可以让我修改语言下拉选择器吗？
浏览 0提问于2019-07-09得票数 0
1回答
垂直溢出时滚动菜单
、、、
我试图让这个汉堡包菜单(当页面宽度小于865px时可见)滚动，以显示屏幕上VH溢出的内容，因为屏幕不够高，无法同时显示整个菜单。根据我的理解，通过设置下拉部分本身的固定高度，像calc(100vh - *header-strip-height*)和overflow-y: scroll;结合应用于#header_menus的东西应该可以工作，但是，因为#header_menus div是顶部条带的子元素，并且顶部条带具有定义的高度，所以设置overflow-y: scroll;似乎会强制下拉部分仅占据条带菜单的VH，并且在条带菜单的范围内滚动，而不是占据整个站点的右侧，在我尝试的所有解决方案中，
浏览 8提问于2021-05-19得票数 0
1回答
Rails表单帮助程序
、、、
我使用了一个rails表单帮助器作为下拉列表，如下所示：
<%= select_tag :analysis, options_for_select(%w[PENDING PASS FAIL], row3[7]), :disabled=> "true",
:id => 'build_status#{index}', :style=> 'width:100px', :onchange => 'this.form.submit()'%>
现在，与其让
:disabled=> "tru
浏览 0提问于2013-03-22得票数 0
回答已采纳
1回答
如何在检查器中显示mainChars统计信息？？
using UnityEngine;
using System.Collections;
public class BaseStats : MonoBehaviour {
public struct baseStats {
public string name;
public int currentLevel;
public int targetLevel;
public int currentHp;
public int maxHp;
浏览 0提问于2013-04-15得票数 0
回答已采纳
5回答
如何使{min-宽度:100%}在IE7中工作？在IE8+和其他浏览器中工作良好。
我使用下拉菜单，其中下拉列表的宽度应该取决于下拉列表中最长的文本，但不小于父链接的宽度。所以我增加了最小宽度:100%降下来。但它适用于其他浏览器，但不适用于IE7。
我怎么才能让它起作用？
演示是在这里叉和玩它。在IE7 中检查这个
浏览 3提问于2012-10-24得票数 3
1回答
我试着用+或-在它之前制作一个下拉信息栏。我不知道它通常是怎么做的，但我想出了这个办法。
.test{
width: 150px;
height: 100px;
background:gray;
}
.test:before{
content: "+";
}
.test:active:before{
content: "-";
}
</div>
<a href="#"><div class="test">
Ahoj
</div> </a>
¨
但是
浏览 0提问于2017-06-04得票数 0
回答已采纳
如何让一个dropdown链接到2下拉菜单。也就是说，如果我选择一个下拉列表的值，那么根据这个值2，更多的下拉列表应该会改变。我使用了下面的例子：。我需要根据在dropdown 1上选择的值填充dropdown 2和dropdown 4的值。
浏览 1提问于2012-04-04得票数 2
回答已采纳
1回答
我是Django的新成员。有一个问题让我对Django的下拉列表感到困惑。我想知道如何根据Django下拉列表中的选择更改页面中的内容。
在Model.py中，我将字段设计为：
STATUS_IN_CHOICE = (
('Pending','Pending'),
('Passed','Passed'),
('Failed','Failed'),
)
Status = models.CharField(max_length=10,choices=STATUS_IN_CHOIC
浏览 1提问于2015-05-28得票数 0
如何使用MaterializeCSS和JavaScript生成n个下拉菜单？我尝试创建一个下拉列表结构，并让所有按钮都触发该下拉列表，但当我单击其中任何一个按钮时，都没有任何反应。 <div id="button-container">
</div>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a
浏览 14提问于2020-04-11得票数 0
我在ASP.NET中有一个下拉列表，其中有100个条目，其中用户选择两个项目的概率很高。所以，我想让这两个项目出现在下面的顶部，
Item 4
Item 6
......
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
.
.
.
Item 100
但是用户不应该能够选择......选项。如何在ASP.NET下拉列表中做到这一点？是否有可能做到这一点而不重复这些项目？
浏览 0提问于2017-01-23得票数 2
我有一个带有列Org的datatable。orgs的不同列表在一个数组中。如何在“列筛选器”下拉框中添加此列表。当我尝试在列表中添加选项时，下拉显示没有value.can --请让我知道如何在下拉列表中添加动态值？
<p-column field="org" header ="Org" [sortable]="true" [filter]="true" filterMatchMode="equals">
<ng-template pTemplate="filter"
浏览 11提问于2017-09-15得票数 1
回答已采纳
我正在将数据绑定到超级网络网格，数据也是正确的，但下拉列表的单元格将作为文本字段出现，除非我们单击它。一旦下拉列表的单元格被点击，下拉列表就会显示出来。我正在允许单元格编辑以及更新它，即使面对这个问题。请让我知道如何解决这个问题。提前谢谢。
浏览 4提问于2012-04-04得票数 0
2回答
是啊，我想知道有没有办法让链接的大小和它的父母一样。看，我正在尝试使下拉菜单的链接延伸到它们所嵌入的.menu类的宽度上。但是它不能工作，即使我把所有的东西都嵌入其中，比如宽度: 100%；
有人能告诉我如何使我的下拉菜单的链接延伸到它们嵌入的.menu类的宽度吗？
浏览 0提问于2011-08-15得票数 0
回答已采纳
3回答
我有两个选择：
我希望用户能够同时看到两个选项(Cips，Projects)；但是，我不想让用户选择不同的项。
如何允许用户单击下拉列表并查看所有选项，但禁用选择任何其他选项？
这个下拉列表的定义如下：
<p-dropdown [(ngModel)]="editRagColumns.BaseObjectType"
name="RagBasicType"
type="text"
class="form-control"
浏览 8提问于2022-01-07得票数 0
ComboBox下拉列表正在显示下拉行项目，是否有任何选项可以让ComboBox显示动态(搜索建议)？
浏览 0提问于2017-11-12得票数 0
2回答
我有一个下拉菜单导航栏，它使用jquery作为下拉菜单，如下所示：
$(document).ready(function () {
$('#nav li').hover(
function () {
$('ul', this).stop().slideDown(100);
},
function () {
$('ul', this).stop().slideUp(100);
}
);
});
在
浏览 2提问于2014-11-07得票数 0
我有一个相对的-positioned目录，它设置了overflow: auto。在其中，我有一个div，它充当一种下拉菜单。我希望下拉div在需要时扩展到父目录的外部，但它被裁剪了，因为父目录有overflow: auto。
我意识到这是正确的行为，但我不确定如何实现我想要的。下面是一些示例HTML，说明了这个问题：
<div style="position: relative; height: 100px; width: 100px; background: red; overflow: auto;">
<div style="po
浏览 0提问于2009-02-24得票数 41
回答已采纳
1回答
访问特定的下拉列表
、、、
我正在编写Ruby/watir脚本。我遇到了一个以斜体显示的下拉列表，它掩盖了重要的选项。如何让我的脚本识别并单击此下拉菜单。我已经尝试查找特定的文本，但没有成功，否则我看不到任何可以抓住的特定标识值。
div中的下拉列表的HTML如下所示。
<span class="help"><a aria-controls="options" aria-expanded="false" href="#options" data-toggle="collapse" class="collapsed&
浏览 0提问于2016-01-20得票数 0
如果是文本框、密码类型或下拉菜单，我必须编写一些jQuery来关注第一个表单元素。
var Text = $('#pagebody').find('input:text:visible:first')
var Pass = $('#pagebody').find('input:password:visible:first')
var Select = $('#pagebody').find('select:visible:first')
if(Tex
浏览 1提问于2014-07-08得票数 4
回答已采纳
1回答
我有一个下拉菜单，在模糊上将值保存到我的数据库中，而不需要刷新页面。这很好用，唯一的问题是现在我需要页面上的其他下拉菜单也用更新后的SQL数据刷新。
我知道页面刷新是可行的，但我想避免这种情况，因为我的页面很长，不想让用户失去他们在上面的位置。
那么，有人知道如何使用onblur或onchange事件刷新SQL查询以及页面上的其他下拉菜单吗？
谢谢!
浏览 0提问于2014-03-09得票数 0
我正在为我的学校项目(高中)创建一个文件夹网页，我有一个叫工作的部分。在那里，我想让图像出现在彼此的旁边(只是一些填充)，然后如果你点击它们，就会有一种下拉菜单，其中图像将出现在左侧网站上，文本将显示在右侧。这也会将网页上的其他内容向下推。
举个例子？谷歌图片。如果你搜索一些东西，比如说"google"，然后你进入图片，如果你现在点击一个随机的图片，就会有一个平滑的下拉列表，里面有图片和一些文本，网站上的其他内容就会被下拉。这就是我想要的。只是我不知道如何让drop向下，并让页面的其余部分向下推。
让图片像在google上一样浮动没什么大不了的，这里的问题是当你点击图片时，会出
浏览 7提问于2013-03-22得票数 0
2回答
我尝试实现以下代码
<div class="functionitem" id="selector_cat">
<select name="sets" style="overflow:auto;width:100px;">
<option value="general">happy holiday</option>
<option value="garden">Garden</option>
<
浏览 0提问于2011-10-27得票数 6
回答已采纳
3回答
这是密码
<select class="selectpicker form-control" data-live-search="true" id="subject_teacher_drop_down">
<option>English</option>
<option>Methodology of social science with special reference to economics</option>
</select>
我
浏览 0提问于2018-06-19得票数 4
回答已采纳
1回答
即顽固地使用上/下拉菜单
、、、
我在上有一个下拉菜单(这是我正在构建的一个网站)。我在有趣的地方测试所有的IE版本，并让它们尽可能地工作。
我遇到的特别问题是让IE让下拉列表中的链接100%覆盖它们的父容器。我觉得我已经尝试了所有的方法，但它仍然不起作用。
有什么建议吗？
浏览 3提问于2011-03-01得票数 2
回答已采纳
场景是当您的下拉菜单中有100+项时，它也是一种痛苦--寻找它。解决办法是让它像谷歌一样自动完成。通过点击下拉菜单和搜索“流行”，所有的单词“流行”将被分类，而不是100+，你现在有3。流行，流行摇滚和K-流行。
使用JavaScript可以吗？
浏览 0提问于2014-01-06得票数 0
回答已采纳
1回答
我使用CSS样式剪辑路径在我的导航，以改变形状的背景在角落。这与我所期望的一样，直到我向内容区域添加了一个下拉列表。
当下拉列表被隐藏时，形状将被正确显示，当下拉列表可见时，形状会发生变化。根据我的研究，这是因为剪辑路径使用元素的宽度和高度来确定元素的剪裁，而当下拉列表可见时，元素的高度会发生变化。
有什么办法改变这种行为吗？我的目标是保持相同的裁剪，无论下拉列表是否可见。
CSS
.dropdown {
background-color: #000;
-webkit-clip-path: polygon(100% 0,100% 0,100% 100%,10% 100%,0 0);
浏览 0提问于2016-03-10得票数 1
回答已采纳
我希望我的下拉菜单从菜单的左侧开始。我尝试在.dropdown上使用诸如left:0；之类的属性，但都没有用。它如何让它从左边开始，而不是从按钮下面的右边开始？
相关代码
.dropdown{
position: absolute;
top: 100%;
left:0;
width: 100vw;
transform: translateY(10px);
opacity: 0;
pointer-events: none;
transition: .5s;
}
.dropdown ul{
position: absolute;
}
浏览 18提问于2021-02-13得票数 0
回答已采纳
1回答
我有3个下拉菜单的动态宽度和位置，像这样
我想让每个下拉宽度到最大的屏幕宽度从当前位置开始，从右侧开始留出10px，就像这样。
下拉列表被定位为其父容器的绝对位置。我想做一个单独的css类，并应用每个下拉列表，这样它就可以像上面的那样工作，最大屏幕宽度可以从上面减去10px。
通过这样的搜索，我发现了很多问题，但在我的问题中却无法解决。我不想用Javascript做任何事情，只想用纯CSS。
许多这样的问题建议使用css的vw单元，但我不明白如何在这个问题中使用大众。来自你们专家的任何帮助都将是非常感谢的。谢谢。
有些人建议这样做，但并不奏效
width:100vw;
ma
浏览 1提问于2017-03-31得票数 2
1回答
是否可以将下拉预览与实际的下拉文本分开？我有一些这样的代码，我只想在预览中发生，但在下拉列表展开时显示全文：
<option value="">{"Lorem ipsum dolor sit".substring(0,15)+"..."}</option>
如何使下拉列表中的预览不是全文，并使用"...“限制追加并在选择dropdown后完全显示该文本
如果这让人困惑，我道歉。很难解释我需要什么。以下是JS对我的代码外观的处理，以帮助减少混淆。
select {
width: 100px
}
<se
浏览 2提问于2018-11-28得票数 2
您好，我有一个标题与其一侧的菜单，现在菜单通过下拉显示，一旦我在标题的一侧的箭头，并一旦我移动我的光标离开菜单下拉区域消失。
我如何让菜单停留，直到我再次单击顶部的箭头按钮，或者在菜单中有一个按钮，如“确定”，这将使菜单向上滑动？
浏览 0提问于2012-02-08得票数 0
回答已采纳
1回答
使用Bootstrap有没有一种方法可以在视频( mp4 )上覆盖字形图标下拉菜单，或者，我可以将mp4作为背景吗？我试过了所有的方法，但都不能正常工作。我可以让字形图标覆盖视频，但不能让它作为下拉菜单使用。我也可以让下拉菜单在背景上工作，但似乎不能让视频作为背景工作。
谢谢，乔恩
浏览 1提问于2016-10-25得票数 0
1回答
我在我的项目中使用VUE，我真的不知道如何处理不同的下拉列表。例如，我有3个不同的下拉列表，我需要通过添加活动css类来显示它们，这里没有问题。但是，如何管理他们的能见度，并改变它的每一个下拉分别，因为只有一个下拉可以同时看到？我试过用插槽来做这件事，但它并没有让我停下来。有人能帮我吗？我的代码：
<div class="account-settings-quickview">
<span class="icon-settings">
<i class="fas fa-cog&#
浏览 4提问于2021-03-23得票数 0
回答已采纳
=AVERAGE(query({JAN!A2:E},"select Col5 where Col1 = '"&A2&"'"))
我的工作簿有一个下拉列表，其中有名字，还有一个从0到100之间的下拉列表。
此公式用于在同一名称下获取多个条目。它在工作表中工作得很好，但我不知道如何让它做我在excel中需要做的事情，因为我不能使用查询语言，而且我对此非常陌生。
任何帮助都很感激！
浏览 6提问于2022-06-10得票数 -1
1回答
是否可以在给定的可选边界之外操作“每页返回的结果”？
例如，此链接：
我可以手动将URL中的numRecords (numRecords=100)更改为下拉列表中可选的任何数字，但这些预设选项之外的任何选项都没有影响。
有没有办法让它产生影响？我试图在单个页面上显示每个结果，因此当我进行数据抓取时，我只需要抓取单个页面，而不必通过编程导航许多页面。这个是可能的吗？
浏览 0提问于2016-12-20得票数 0
1回答
让我有一个大小和价格的数组，比如
array = [[large, 100],[medium, 70],[small, 50]]
我想要两个下拉列表，一个是尺寸，一个是价格。我想如果用户选择大从第一下拉价格100将被自动选择，它需要被禁用。这很简单，但是我需要帮助，我使用的是Rails4.0
浏览 2提问于2014-02-04得票数 0
1回答
我有这个代码..
$( document ).ready(function() {
$('#staffs').chosen();
$('#region').chosen();
$('#province').chosen();
});
我想让它在某种意义上是动态的，当区域改变时，它将改变省的下拉列表。如何取消选中省选择框？
浏览 2提问于2014-10-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
