1
我试图使鼠标悬停时出现下拉菜单,但出于某种原因,菜单不出现。下拉列表不会出现在鼠标悬停上
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
list-style-type: none;
height: 35px;
width: 100%;
overflow: hidden;
background: #333333;
}
.header > li {
display: inline-block;
padding: 8px;
}
.header > li:hover {
background: #000000;
}
.home {
margin-left: 10%;
}
.home a:link {
color: #FFF;
}
.home a:visited {
color: #AAA;
}
.home a:hover {
color: #00F;
}
.home a:active {
color: #F00;
}
.dropdown {
display: block; /* I guess that something is wrong here */
width: auto;
color: #FFF;
}
.dropdown li {
list-style-type: none;
display: block; /* I guess that something is wrong here too */
position: absolute; /* and here */
top: 100%;
color: red;
width: auto;
opacity: 0;
background: yellow;
border: 1px solid black;
transition: opacity 1s;
}
.dropdown:hover,
.dropdown li:hover {
opacity: 1;
}
.main {
margin-top: 20px;
padding-top: 20px;
height: 50px;
display: block;
background: white;
text-align: center;
font-size: 20px;
transition: background 1s;
}
.main:hover {
background: #CCCCCC;
}
<body>
<ul class="header">
<li class="home"><a href="#">⌂ Home</a>
</li>
<li class="dropdown">Dropdown ❱
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
<br>
<section>
<div class="main">
Content...
</div>
</section>
</body>
我试图做到这一点使用CSS和HTML只。
我已经评论旁边的三条线,我认为是造成这个问题,但我似乎无法弄清楚。什么是问题?我如何解决它?
我想'.dropwdown李{不透明度:0; }'因为它也是它自己的一小部分,保利:D –
我把它拿出来了......在问题的条款中没有真正的必要。 –
我知道你有足够的信息来回答每一个CSS问题,但你不这样做。你总是喜欢评论而不是张贴答案。 – Alex