发布于2023-11-18 07:47 阅读(299) 评论(0) 点赞(7) 收藏(1)
我很困惑为什么我的下拉菜单无法出现。有人可能知道这个问题吗?感谢帮助!
我已经检查了我的下拉列表并显示它,它可以,但我无法将下拉列表设置为在鼠标悬停在链接上时显示。这是我的代码:
body {
font-family: Verdana, Geneva, sans-serif;
padding: 0;
margin: 0;
}
.ic {
font-weight: bold;
margin-right: 5px;
font-size: .9rem;
}
.wrap {
background-color: black;
}
#topbar {
padding: 0;
width: 1200px;
/* FOR a static width like Posh CSS */
height: 50px;
margin: auto;
text-transform: uppercase;
font-size: .8rem;
}
.nospace {
color: white;
}
li {
margin: 15px;
}
li.left {
float: left;
list-style: none;
}
li.right {
float: right;
list-style: none;
}
li a {
text-decoration: none;
color: aqua;
}
#banner {
background: url(bg1.jpg) no-repeat center;
height: 600px;
background-size: 1650px;
opacity: 0.7;
font-family: 'Forum', cursive;
font-size: 20px;
}
ul li {
list-style-type: none;
padding: 0;
margin: 0;
}
.menubar {
width: 1200px;
margin: auto;
display: block;
}
.menubar a {
padding: 10px;
color: black;
}
.menubar a:hover {
background-color: white;
}
.drop-nav {
position: relative;
}
.drop-nav:after {
content: "\25BC";
font-size: .5em;
display: block;
position: absolute;
top: 40%;
right: 1%;
}
#content {
padding: 0;
position: absolute;
display: none;
background-color: gray;
min-width: 120px;
z-index: 1;
}
#content a {
color: blue;
border-bottom: 2px solid black;
text-decoration: none;
display: block;
}
#content a:hover {
background-color: aqua;
}
li .drop-nav a:hover {
display: block;
}
.wrap01 {
height: 60px;
border-bottom: 1px solid gray;
}
<body>
<div class="Halaman">
<div class="wrap">
<div id="topbar">
<div class="nospace">
<li class="left"><span class="ic">☏</span> +00 (123) 456 7890</li>
<li class="left"><span class="ic">✉</span> info@domain.com</li>
<li class="right"><a href="#">Tentang</a></li>
<li class="right"><a href="#">Kontak</a></li>
<li class="right"><a href="#">Login</a></li>
<li class="right"><a href="#">Register</a></li>
<li class="right"><a href="#"><i class="fa fa-home"></i></a></li>
</div>
</div>
</div>
<div id="banner">
<div class="wrap01">
<nav class="menubar">
<li class="left">Sistem Pemberkasan Gudang</li>
<li class="right"><a href="#">Link Text</a></li>
<li class="right"><a href="#">Link Text</a></li>
<li class="right"><a class="drop-nav" href="#">Dropdown</a>
<ul id="content">
<a href="#">zero 1</a>
<a href="#">zero 1</a>
</ul>
</li>
<li class="right"><a class="drop-nav" href="#">Halaman</a></li>
<li class="right"><a href="index.html" style="color: red;">Rumah</a></li>
</nav>
</div>
</body>
我在互联网和 W3C 上做了一些研究,但仍然找不到答案。
您的选择器有误li .drop-nav a:hover
您需要设置#content
才能再次显示。使用display: none
会阻止你使用过渡,所以我使用了visibility
&height
属性。
您可以在下面查看。
body {
font-family: Verdana, Geneva, sans-serif;
padding: 0;
margin: 0;
}
.ic {
font-weight: bold;
margin-right: 5px;
font-size: .9rem;
}
.wrap {
background-color: black;
}
#topbar {
padding: 0;
width: 1200px;
/* FOR a static width like Posh CSS */
height: 50px;
margin: auto;
text-transform: uppercase;
font-size: .8rem;
}
.nospace {
color: white;
}
li {
margin: 15px;
}
li.left {
float: left;
list-style: none;
}
li.right {
float: right;
list-style: none;
}
li a {
text-decoration: none;
color: aqua;
}
#banner {
background: url(bg1.jpg) no-repeat center;
height: 600px;
background-size: 1650px;
opacity: 0.7;
font-family: 'Forum', cursive;
font-size: 20px;
}
ul li {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
nav li {
position: relative;
}
.menubar {
width: 1200px;
margin: auto;
display: block;
}
.menubar a {
padding: 10px;
color: black;
}
.menubar a:hover {
background-color: white;
}
.drop-nav {
position: relative;
}
.drop-nav:after {
content: "\25BC";
font-size: .5em;
display: block;
position: absolute;
top: 40%;
right: 1%;
}
#content {
padding: 0;
visibility: hidden;
height: 0px;
background-color: gray;
z-index: 1;
}
#content a {
color: blue;
border-bottom: 2px solid black;
text-decoration: none;
display: block;
}
#content a:hover {
background-color: aqua;
}
li:hover ul#content {
display: block;
position: absolute;
top: 25px;
left: 0px;
height: 200px;
width: 120px;
visibility: visible;
}
.wrap01 {
height: 60px;
border-bottom: 1px solid gray;
}
<body>
<div class="Halaman">
<div class="wrap">
<div id="topbar">
<div class="nospace">
<li class="left"><span class="ic">☏</span> +00 (123) 456 7890</li>
<li class="left"><span class="ic">✉</span> info@domain.com</li>
<li class="right"><a href="#">Tentang</a></li>
<li class="right"><a href="#">Kontak</a></li>
<li class="right"><a href="#">Login</a></li>
<li class="right"><a href="#">Register</a></li>
<li class="right"><a href="#"><i class="fa fa-home"></i></a></li>
</div>
</div>
</div>
<div id="banner">
<div class="wrap01">
<nav class="menubar">
<li class="left">Sistem Pemberkasan Gudang</li>
<li class="right"><a href="#">Link Text</a></li>
<li class="right"><a href="#">Link Text</a></li>
<li class="right"><a class="drop-nav" href="#">Dropdown</a>
<ul id="content">
<a href="#">zero 1</a>
<a href="#">zero 1</a>
</ul>
</li>
<li class="right"><a class="drop-nav" href="#">Halaman</a></li>
<li class="right"><a href="index.html" style="color: red;">Rumah</a></li>
</nav>
</div>
</body>
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/532558/ebd0d52184ca0b05662b/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!