在我目前的项目中,我的一个观点中有这个html:
<header>
<ul>
<li>
<nav>
<ul>
<li class="logo"> <a href="#"><img src="#" alt="logo"/></a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
</ul>
</nav>
</li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
</ul>
</header>
这部分:
<li>
<nav>
<ul>
<li class="logo"> <a href="#"><img src="#" alt="logo"/></a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
</ul>
</nav>
</li>
它隐藏了<li><a href="#">blablabla</a></li>
的第一个。这个项目的CSS样式是:
nav {
z-index: 1;
position: fixed;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #DCDCDC;
width: 120px;
}
nav ul li.logo {
width: 100%;
}
nav ul li.menu:hover {
background-color: #C0C0C0;
width: 100%;
}
nav ul li.menu > a {
text-decoration-color: #FAEBD7;
font-family: 'Special Elite', cursive;
}
nav ul li.menu:hover > a {
text-decoration-color: #FFFAF0;
}
和标题:
header {
top: 0;
left: 0;
background-color: #333;
width:100%;
}
header:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 32px;
overflow: hidden;
background-color: #333;
float: left;
z-index: 2;
}
header ul.right {
padding: 0;
padding-right: 32px;
float: right;
}
header ul li {
float: left;
display: inline;
}
header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Oxygen Mono';
}
header li a:hover {
background-color: #111;
}
header li.active {
background-color: #4CAF50;
}
任何人都知道如何避免这种重叠?
答案 0 :(得分:1)
错误是因为在你的代码中你给了li float: left
添加这个
header > ul > li {
position: relative;
display: inline-block;
min-width: 130px;
}
nav {
z-index: 1;
position: fixed;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #DCDCDC;
width: 120px;
}
nav ul li.logo {
width: 100%;
}
nav ul li.menu:hover {
background-color: #C0C0C0;
width: 100%;
}
nav ul li.menu > a {
text-decoration-color: #FAEBD7;
font-family: 'Special Elite', cursive;
}
nav ul li.menu:hover > a {
text-decoration-color: #FFFAF0;
}
header {
top: 0;
left: 0;
background-color: #333;
width:100%;
}
header:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
header ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 32px;
overflow: hidden;
background-color: #333;
float: left;
z-index: 2;
}
header ul.right {
padding: 0;
padding-right: 32px;
float: right;
}
header > ul > li {
position: relative;
display: inline-block;
min-width: 130px;
}
header ul > li nav { }
header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Oxygen Mono';
}
header li a:hover {
background-color: #111;
}
header li.active {
background-color: #4CAF50;
}
&#13;
<header>
<ul>
<li>
<nav>
<ul>
<li class="logo"> <a href="#"><img src="#" alt="logo"/></a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
<li class="menu"> <a href="#">blablabla</a> </li>
</ul>
</nav>
</li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
</ul>
</header>
&#13;