html - 移动元素时在导航栏中填充
问题描述
嗨,我似乎无法在移动元素后移除背景颜色。虽然元素已经移动并且它们运行良好,但每次在此处输入图像描述时,我都会单击登录并注册,原始空间似乎显示为背景颜色。
HTML 代码:
<nav>
<ul>
<li><a class="active" href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">Romance</a></li>
<li><a href="#">Paranormal</a></li>
<li><a href="#">Thriller</a></li>
<li><a href="#">Horror</a></li>
</ul>
</li>
<li><a href="#">Reviews</a>
<ul>
<li><a href="#">Star Rating 1</a></li>
<li><a href="#">Star Rating 2</a></li>
<li><a href="#">Star Rating 3</a></li>
<li><a href="#">Star Rating 4</a></li>
<li><a href="#">Star Rating 5</a></li>
</ul>
</li>
<li><a href="#">Contest</a>
<ul>
<li><a href="#">Giveaways</a></li>
<li><a href="#">Free Books for Reviews</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">For Authors</a></li>
<li><a href="#">For Bloggers</a></li>
</ul>
</li>
<li><a href="#" class="signed"><i class="fa fa-user-plus" aria-hidden="true"></i>Sign Up</a></li>
<li><a href="#" class="signed"><i class="fa fa-fw fa-user"></i>Sign In</a></li>
</ul>
</nav>
CSS 代码:
/* navigation top menu */
nav{
position: relative;
top:0;
left:0;
padding: 5px 0 0 0;
width: 100%;
font-size: 1em;
}
.active
{
background-color: #F24F1B;
color: white;
}
nav::after{
content:'';
display: block;
clear:both;
}
nav ul{
list-style: none;
margin:0;
padding:0;
position: relative;
right: 200px;
}
nav ul li:hover {
background-color: #F24F1B;
}
nav ul li:hover > ul {
display: block;
}
nav ul li a {
display: inline-block;
color:black;
padding: 10px 20px;
text-decoration: none;
width: 125px;
position: relative;
}
nav ul li a:visited {
color:black;
}
nav ul li a .active{
color: white;
}
nav ul li a:hover {
background-color: #F24F1B;
color: white;
}
nav ul ul {
position: relative;
top: 100%;
background-color: #F24F1B;
display: none;
position: relative;
right: 0px;
}
nav ul ul li {
position: relative;
border-bottom: 2px solid rgb(128, 104, 104);
}
nav ul ul ul {
left: 100%;
top: 0px;
}
/* top level */
nav>ul {
padding-left: 200px;
color:white;
}
nav>ul>li {
float: left;
}
nav>ul>li>a {
width: auto;
padding: 10px 20px 15px 20px;
}
.signed {
position: relative;
left: 300px;
}
解决方案
.signed {
background-color: transparent;
position: relative;
left: 300px;
}
试试这个。
推荐阅读
- kubernetes - 最高 CPU 利用率 - 节点名称
- servicenow - 在 UI 宏中时 getDispalyValue('field_name') 不起作用
- python - 保存pygame绘图
- python - 您如何将 100 个术语列表汇总为少量(约 5 个)重要术语?
- javascript - .then() 子句未执行
- angular - Angular material 10 日期选择器(mat-datepicker)与其他输入字段不对齐
- python - PyGame:对位于两个列表中的多个图像使用 img.get_rect() 并为它们使用唯一的宽度和高度变量
- ios - 集合视图单元格背景颜色在 reloadData() Swift/Firebase 上反转
- pandas - 从日期时间列中提取月份和年份的问题
- python - 如何运行 MySQL 数据库作为 Rasa 服务器的跟踪器存储?