我正在尝试在 html/css 中创建一个下拉登录/注册表单我希望它从我已经创建的导航栏中下拉但是我无法让它正常工作任何人都可以给我一些指示并告诉我我是什么我做错了
这是我正在创建的页面的 jsfiddle https://jsfiddle.net/nikhendricks43/cqod7p57/#&togetherjs=lxPBaomiBb
或者这是我的代码:
:html
<title>MVBT FFA Chapter</title>
<head>
</head>
<div id="header">
<a id="addpost"href="editnews.html">+</a>
<center><img src="ffaheader.png" alt-"ffa header image" width="70%" height="40%"></center>
</div>
<div id="nav">
<ul>
<li><a href="file:///E:/ffachapterpage/home.html">Home</a></li>
<li><a href="file:///E:/ffachapterpage/events.html">Events</a></li>
<li><a href="file:///E:/ffachapterpage/contact.html">Contact</a></li>
<li><a href="file:///E:/ffachapterpage/donate.html">Donate</a></li>
<li><a href="file:///E:/ffachapterpage/about.html">About</a></li>
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="email">
<p>Password<p>
<br/>
<input type="password" placeholder="password">
</div>
</div>
</body>
</html>
<script>
function dropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</ul>
<body>
</div>
<body bgcolor="grey">
<div id="bodydiv">
<iframe src="file:///E:/ffachapterpage/newscontent.html"></iframe>
</div>
</body>
</html>
这是我的 CSS:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
align-content: right;
position: relative;
}
.dropdown-content {
width: 1000px;
height: 500px;
padding:5px;
display: none;
position: absolute;
background-color: blue;
min-width: 160px;
overflow: auto;
box-shadow: 0px 0px 3px 16px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: blue}
.show {display:block;}
#sidebarleft{
width:20%;
height:100%;
background:grey;
}
#addpost{
text-decoration: none;
margin-top: 20px;
margin-left: 20px;
}
#addpost:hover{
font-size: 20px;
color:grey;
}
#newsframe{
padding-left:20%;
width:65%;
height:100%;
border:10px;
}
#header{
background: #fcec5d;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fbec5d;
}
li {
float: left;
}
li a {
display: inline-block;
color: blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: grey;
}
#nav{
width:100%;
height:46px;
background:#fbec5d;
}
#headerimage{
width:100%;
height:35%;
display:flex;
}
#bodydiv{
width:100%;
height:100%;
background:blue;
display:flex;
}
最佳答案
See this fiddle I made based on your code
HTML:
<div class="container">
<li><a href="file:///E:/ffachapterpage/home.html">Home</a></li>
<li><a href="file:///E:/ffachapterpage/events.html">Events</a></li>
<li><a href="file:///E:/ffachapterpage/contact.html">Contact</a></li>
<li><a href="file:///E:/ffachapterpage/donate.html">Donate</a></li>
<li><a href="file:///E:/ffachapterpage/about.html">About</a></li>
<div class="dropdown">
<span>Your dropdown text</span>
<div class="dropdown-content">
<label class="margin-bottom-5">Email: <label><br>
<input class="margin-bottom-5" type="text" placeholder="email"><br>
<label class="margin-bottom-5">Password: <label><br>
<input class="margin-bottom-5" type="password" placeholder="password"><br>
<input class="margin-bottom-5" type="submit" value="Connect"/>
</div>
</div>
</div>
CSS:
/* When the .dropdown div gets hovered,
we change the display property of the dropdown
content in order for it to be shown */
.dropdown:hover .dropdown-content {
display: block;
}
/* "An element with position: relative;
is positioned relative to its normal position" */
.dropdown {
position: relative;
display: inline-block;
}
/*"An element with position: absolute; is positioned
relative to the nearest positioned ancestor"
In this case, it's positioned relative to the
.dropdown div. I then played with the
left and top properties in order to align it properly
*/
.dropdown-content {
display: none;
position: absolute;
left:0px;
top:46px;
background-color: #f9f9f9;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
border:1px solid black;
}
/*Under this comment, it's mostly for styles. You can ignore what's below*/
a:hover {
background-color: grey;
}
li {
list-style-type: none;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown{
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover{
background-color: grey;
}
.margin-bottom-5 {
margin-bottom: 5px;
}
.container {
border:1px solid black;
}
关于javascript - 如何在html/css中制作下拉登录菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35329581/