Navigation bar hover - html

Question

I'am stuck with this one thing in navigation bar.
So I made ribbon navigation bar with hover when mouse over the element. I do have class ".active" then ribbon is little bit longer, but when i mouse over this active element ribbon decreases. I want to know how can make hover on everything except for that ".active" class, and also for drop-down content.
I think, there is a work with those Pseudo-elements like :not() but i'm not sure,i tried almost everything.
Thanks.
Here is my HtTML+CSS code so far!
<nav role="top">
<ul>
<div class="ribbon">
<li>Home</li>
<li >Blog</li>
<li class="active" >Portfolio</li>
<li>Music</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
<li id="livechat" >About me</li>
</div>
</div>
</ul>

Answer 1

Since .active is applied to the parent li, you need to use :not() on that to target .active or not, and then apply the CSS that changes when you hover a link
nav[role="top"] li:not(.active) a:hover { ... }
nav[role="top"] ul {
list-style-type: none;
float: right;
margin-top:0px;
}
nav[role="top"] li {
display: inline-block;
position: relative;
float: right;
padding:0 8px;
}
nav[role="top"] a {
display: block;
color: #b3b3b2;
text-align: center;
padding: 14px 0px;
text-decoration: none;
width: 70px;
font-size: 11px;
font-family: 'Pontano Sans', sans-serif;
font-weight: 600;
}
nav[role="top"] li:not(.active) a:hover {
height:1px;
text-decoration: none;
width: 70px;
background-color: #aecacc;
color:#fff;
}
nav[role="top"] a:hover::after {
margin-top:-18px;
content: "";
display: block;
position: static;
width: 0;
height:20px;
border-right: 35px solid #aecacc;
border-left: 35px solid #aecacc;
border-bottom: 12px solid rgba(224, 33, 33, 0);
}
.active a {
height:12px;
text-decoration: none;
width:20px;
background-color: #aecacc;
}
.active a:first-child {
color:white;
}
.active::after {
margin-top:0px;
content: "";
display: block;
position: static;
width: 0;
height: 20px;
border-right: 35px solid #aecacc;
border-left: 35px solid #aecacc;
border-bottom: 12px solid rgba(224, 33, 33, 0);
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display:none;
position: fixed;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
transition: all .4s ease-in-out;
}
.dropdown-content a:hover {
background-color: rgba(208, 208, 207, 0.2)
}
.dropdown:hover .dropdown-content {
display:block;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>Home</li>
<li >Blog</li>
<li class="active" >Portfolio</li>
<li>Music</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
<li id="livechat" >About me</li>
</div>
</div>
</ul>
</nav>

Answer 2

You are correct about the :not(). Add it to line 29 of your CSS
nav[role="top"] li:not(.active) a:hover {
height:1px;
text-decoration: none;
width: 70px;
background-color: #aecacc;
color:#fff;
}