我只是 HTML5 和 CSS 的开始。我正在尝试制作下拉菜单,但出了点问题。看了一会儿,但找不到我的错误。我希望有人愿意帮助我!下面是我的 CSS 编码。如果有一些问题或细节需要评论,我当然很想听听他们的意见。
*{
margin: 0;
padding: 0;
front-family: century gothic;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(image.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration:none;
color:#fff;
padding:5px 20px;
border:2px solid transparent;
transition: 0.8s ease;
}
ul li a:hover{
background-color:#fff;
color: #000;
}
ul li.active a{
background-color:#fff;
color: #000;
}
/* Dropdown Button */
.dropbtn {
background-color: #fff;
color: black;
padding: 16px;
font-size: 16px;
border: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding:10px 50px;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.logo img{
float:left;
width: 150px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}
答案 0 :(得分:0)
当您悬停时,您的 CSS 中没有任何内容告诉 .dropdown-content 出现。你可以尝试这样的事情。我已经复制了您的 CSS 并添加到其中,还添加了一些 HTML:
*{
margin: 0;
padding: 0;
font-family: century gothic;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(image.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration:none;
color:#fff;
padding:5px 20px;
border:2px solid transparent;
transition: 0.8s ease;
}
ul li a:hover{
background-color:#fff;
color: #000;
}
ul li.active a{
background-color:#fff;
color: #000;
}
/* Dropdown Button */
.dropbtn {
background-color: #fff;
color: black;
padding: 16px;
font-size: 16px;
border: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding:10px 50px;
display: inline-block;
}
.dropbtn:hover ~ .dropdown .dropdown-content {
display: block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.logo img{
float:left;
width: 150px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}
<header>
<div class="dropbtn">show dropdown</div>
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
</ul>
</div>
</div>
</header>
我正在使用一般的兄弟选择器 ~,使我的 :hover CSS 工作。看到您的实际 HTML 后,我可以改进此答案。