我试图复制者从这个website导航菜单。我已经成功地它的工作在一定程度上,但徘徊在保持相同的颜色和所有其他的改变不能使该服务链接。
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee !important;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
正如你可以看到我已经改变了对无序列表这可能不是试图得到这个工作的最佳方式悬停的链接的颜色。拜托,能不能有人告诉我的最佳方法来解决这一问题?
你靠近 - 你必须删除从影响!important
因为这样的规则.nav ul:hover a
压倒一切的规则,这将确保悬停的项目是不同的颜色比其他人:
.header {
display: flex;
width: 100%;
}
.nav {
width: 80%;
margin: auto;
position: relative;
}
.nav a {
color: #000;
}
.nav ul {
list-style: none;
padding: 0;
width: fit-content;
}
.nav ul:hover a{
color: #eee;
padding-bottom: 20px;
}
.nav ul li:hover a {
color: #333;
padding-bottom: 20px;
}
.nav li:last-child {
margin: 0;
}
.nav ul li {
display: inline-block;
margin: 0 35px 0 0;
}
.three:hover>.sub-menu {
display: flex;
opacity: 1
}
.sub-menu {
height: 200px;
display: flex;
flex-direction: row;
position: absolute;
top: 100%;
background: #333;
display: none;
opacity: 0;
left: 0;
right: 0;
}
<div class="header">
<div class="nav">
<ul>
<li>
<a class="one">Home</a>
</li>
<li>
<a class="two">About</a>
</li>
<li class="three">
<a class="">Services</a>
<div class="sub-menu">
<div class="col-1-4"></div>
</div>
</li>
<li>
<a class="four">Contact</a>
</li>
</ul>
</div>
</div>
Here's a good resource上!important
如何影响页面上的其他规则。