html - 导航栏的 Html 和 Css 问题
问题描述
我对 html 和 css 很陌生,但我的导航栏和汉堡菜单有问题,li a 元素在我的图像后面,我似乎无法解决这个问题。如果您还可以查看第一张图片,您将看到 li a 元素和深红色背景,这不应该在顶部。
nav {
height: 80px;
background: crimson;
opacity: 80%;
}
nav h1 {
width: 400px;
position: absolute;
top: 20px;
left: 12%;
color: white;
font-size: 30px;
}
nav ul {
float: right;
margin-right: 25px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 15px;
}
nav ul li a {
position: relative;
color: white;
font-size: 18px;
padding: 5px 0;
text-transform: uppercase;
}
nav ul li a:before {
position: absolute;
content: "";
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: white;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s linear;
}
nav ul li a:hover:before {
transform: scaleX(1);
transform-origin: left;
}
label #btn,
label #cancel {
color: white;
font-size: 30px;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
@media (max-width: 1118px) {
nav h1 {
left: 8%;
}
}
@media (max-width: 944px) {
nav h1 {
left: 6%;
top: 20px;
width: 300px;
}
nav ul li a {
font-size: 17px;
}
}
@media (max-width: 860px) {
label #btn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: crimson;
top: 80px;
left: 0;
text-align: center;
}
nav ul li {
display: block;
margin: 50px;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
}
<nav>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<h1>Benji's Equestrian</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
以上是导航栏的当前css,下面我将发布html。
<nav>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<h1>Benji's Equestrian</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
导航栏和元素的问题:
导航栏
@media (max-width: 860px) {
label #btn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: crimson;
top: 80px;
left: -100%;
text-align: center;
transition: all 0.5s;
}
nav ul li {
display: block;
margin: 50px;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
#check:checked ~ ul {
left: 0;
}
}
上面的 css 是我认为问题所在,我尝试添加 z-index:100; 到 .nav 元素,它不能解决问题。
解决方案
如果您想确保自己nav
掌握一切,那么只需添加z-index
大于0
或类似于人们通常所做的任何数量100
,甚至可能1000
:-
nav {
height: 80px;
background: crimson;
opacity: 80%;
z-index: 100
}
推荐阅读
- arrays - perl中如何以数组形式保存数据?
- r - How to add variable labels from one dataframe into another in R?
- ios - 如何为 UISlider 拇指正确设置自定义图像?
- php - 使用所见即所得的文本编辑器创建电子邮件
- javascript - 如何在给定数组上使用方法之前省略检查数组长度?
- kubernetes - 无法获取我的 kubernetes 主节点的 externalID(即 aws 提供的 instanceId)
- recursion - 树的树的时间复杂度 [...]
- .net - 模型优先的方法,在 SQL 脚本中不生成属性的默认值
- python - Tkinter 以与扩展相同的方式缩小窗口以适应框架?
- python - 返回字典的 Python sorted() 函数 - 代码优化