草庐IT

html css 下拉菜单

coder 2023-08-11 原文

这是我第一次在 Stack Overflow 发帖，我不熟悉发帖的论坛规定。所以请让我知道我做错了什么。我在论坛中研究了这个问题，但我遇到的任何问题都没有给我明确的答案。

我正在尝试从“新闻”元素创建一个下拉菜单，但在运行代码时我从未得到任何可见的结果。我试图将 .dropdown-content 的 display 值更改为 block 以查看它是否会使列表可见，但没有任何显示。我错过了什么？

body{
	background-image: url("images/seamless-panda-bear-pattern.jpg");
	font-size: 100%;
	width: 80%;
	margin: auto;
	font-family: Palatino,"Palatino", Arial;

}

#top{
	background-color: black;
	color: white;
	padding-left: 10px;
	border: 2px solid white;
	font-family: Copperplate,"Copperplate Gothic Light",fantasy;
	opacity: 0.85;
	padding-left: 25px;
}

#menu{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	position: fixed;
	width: 80%;
}
li{
	float: left;
}

#login{
	float: right;
	padding-right: 20px;
}

li a{
	display: block;
	color: white;
	text-decoration: none;
	text-align: center;
	padding: 14px 16px;

}
li a:hover{
	background-color: white;
	color: black;
}

li.dropdown{
	display: inline-block;
}

.dropdown-content{
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
	padding: 12px 16px;
	z-index: 1;
}

.dropdown-content a{
	display: block;
	text-decoration: none;
	padding: 12px 16px;
	color: black;
}

.dropdown:hover .dropdown-content{
	display: block;
}


#bio{

}

#bottom{

}
<div id="nav">
<ul style="list-style-type: none" id="menu">
	<li><a href="home.html">Home</a></li>
	<li class="dropdown"><a class="dropbtn" href="#">News</a>
		<div class="dropdown-content">
			<a href="#">Games</a>
			<a href="#">Web Design</a>
			<a href="#">Travel</a>
		</div>
	</li>
	<!-- create a link to a part of the same page for contact info -->
	<li><a href="#bottom">Contact info</a></li>
	<li id="login"><a href="login.html">Log In</a></li>
</ul>
</div>

最佳答案

解决您的位置固定问题。您可以将 position: fixed; 添加到 #nav 并将 #menu 上的宽度从 width: 80%; 到 width: 100%;

这是一个 JS Fiddle .

希望对您有所帮助!

关于html css 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36784070/

htmlcsscode34sectiondropdown

有关html css 下拉菜单的更多相关文章

  1. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking

  2. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  3. ruby-on-rails - Scaffold Rails 3 View 中的外键下拉列表 - 2

    我使用脚手架和Rails3创建了2个模型。模型是位置和作业，每个作业都有一个位置。我在脚手架生成代码中创建了所需的引用调用，但是当我查看创建新作业的View时，我看到的只是一个文本框，我应该在其中添加location_id。我怎样才能让它变成下拉菜单以获得更好的用户体验？ 最佳答案 想象一下，您有每个位置的titleAPI:http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select 关于r

  4. ruby - 下拉菜单在应该被选中的时候没有被选中……为什么？ - 2

    我正在尝试解决我们测试中的一个错误，我认为它应该有效。我很确定这是selectize或capybara中的错误，但我不明白为什么。我已经进入了capybara的源代码，一切似乎都在正常工作。我真的不确定如何前进。为了测试这个错误，我已经尽可能地把这个错误剥离成一个小的testapplication.请参阅下面的设置bugs/show.html.erbOneTwoThreeFourOneTwoThreeFourbug_spec.rbfeature'bug'doit"specsetup",js:truedovisitbug_pathfind('div.selectize-inputinpu

  5. ruby-on-rails - 在 Rails 中，如何使用字符串数组实现 HTML 选择菜单？ - 2

    我有一个FinancialDocument#document_type模型属性。我想让用户从由字符串数组填充的HTML选择菜单中选择文档类型...doctypes=['Invoice','Packingslip','Other']对于每个选项，显示的标签和返回的值都是相同的。我查看了select和collection_select助手，但它们似乎适合选择子模型，而不仅仅是一个String值。我找不到如何让它们达到我的目的。这是我正在尝试的方法(我使用的是Haml，而不是Erb)...form_for(@financial_document)do|f|-doctypes=['Invoic

  6. ruby - 如何在 ruby​​ watir 中选择下拉值选项？ - 2

    这是我的下拉菜单，我想在它的值选项上选择它01-Liveanimals我知道如何选择下拉内容，即ie.select_list(:id,"DropDownList_Product").select("01-Liveanimals")实际上我想选择其值01的下拉菜单，我应该为此做什么？ 最佳答案 像这样的东西应该可以工作:ie.select_list(:id,"DropDownList_Product").select_value("01")更多信息请访问http://rdoc.info/gems/watir-webdriver/Wat

  7. ruby - capybara 将下拉选项文本写入数组 - 2

    我想在capybara中将下拉列表的选项放入一个数组中。在此过程之后，我期望有一个字符串数组，其中包含所有下拉选项。我尝试了下面的代码，但无论选项计数是多少，我的数组长度都保持为1。periods=Array.new()periods=all('#MainContent_dd')printperiods.length 最佳答案 问题在于all('#MainContent_dd')返回所有具有IDMainContent_dd的元素。假设这是您的下拉列表并且id是唯一的，则periods.length应为1(即periods是选择列表)

  8. ruby - OS X 中作为守护进程运行的脚本的菜单栏图标？ - 2

    我有一个ruby​​脚本(https://github.com/daemonza/MacBak)作为守护进程在我的macbook上运行并监视一堆目录的文件更改和rsync发生的任何更改。我想知道我能否让它在顶部的菜单栏中创建一个图标？只是为了让我知道它确实在运行，而不必使用ps检查它。也许以后如果需要的话，我可能希望能够从那里控制脚本，简单的带有停止和状态条目的下拉菜单等。从ObjectC看来我可以调用NSStatusItem来获取图标，但我真的只是想通过我的Ruby脚本轻松地完成它。也许我可以做一些applescript调用？ 最佳答案

  9. ruby-on-rails - Ruby on Rails : allow the user to enter a new information, 或单击下拉菜单选择现有信息 - 2

    这里是新的ROR程序员。我正在尝试构建一个Web应用程序，该应用程序允许用户填写表单，他们在其中输入公司信息，然后通过单击提交，将输入添加到数据库中。目前，如果用户要创建一个新条目，他们会看到几个字段，例如“公司名称”。有一个空白框供他们输入新公司，旁边有一个下拉菜单，用户可以使用该菜单查看数据库中的现有公司。"SelectaCompany")%>我正在寻找一种允许用户输入新公司的方法，或者单击下拉菜单并选择现有公司。目前:如果未在文本框中输入任何内容且未从下拉列表中选择任何选项，则将其保存为空白。如果输入了一些内容，但没有选择任何选项，它将被保存为空白。但是，如果输入内容并从下拉列表

  10. ruby-on-rails - 如何在 ActiveAdmin 中设置父菜单优先级？ - 2

    我的RubyonRails应用程序中有几个模型，如“Plan”、“Tester”、“Module”等。使用activeadmingem，我想为每个实体创建一个页面，并将每个实体放在下面几个不同的菜单。所以我的代码如下所示:ActiveAdmin.registerPlandomenuparent:'Planning',priority:1ActiveAdmin.registerTesterdomenuparent:'Planning',priority:2ActiveAdmin.registerModuledomenuparent:'Bundle',priority:1ActiveAdm

随机推荐