Fixed position with hover - html

Question

Well I have a navigation with a fixed position with a list inside, which I want to change color on a hover. But this doesn't work because of the fixed position of the navigation. Is there a way to get around this?
Here is my example
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li:hover { cursor: pointer;}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1">Link1</li>
<li data-menu="Link2">Link2</li>
<li data-menu="Link3">Link3</li>
<li data-menu="Link4">Link3</li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>
Thanks in advance!

Answer 1

Well after trying and trying I added a z-index in the .nav css and it worked... finally! I have no clear explanation for why it worked, but it worked for me.

Answer 2

There is no way currently in CSS alone to select a parent of a child.
The best way I can think of to do this, or at least the simplest would require a little JS.
Simple add a data attribute to your list items, and a JS event that on hover passes the value of the data attribute as a class to the fixed navigation. That class would control color.
Have a go yourself, if you struggle post some code and we can fix it.

Answer 3

Seems to work fine for me with your code (all I did was actually put the <a> tags inside the <li> elements, since that was what your code was targeting.)
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #ffffff;
box-shadow: 0px -2px 5px 1px;
}
.nav-inner {
position: relative;
width: 100%;
max-width: 1500px;
height: 80px;
margin-left: 50%;
transform: translate(-50%);
}
.nav-right {
float: right;
height: 100%;
}
.nav-menu {
position: relative;
top: 50%;
margin: -30px 130px 0px 0px;
height: 60px;
}
.nav-menu li {
list-style: none;
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 10pt;
padding: 20px;
}
.nav-menu li:last-child {margin: 0}
.nav-menu li a:hover {
cursor: pointer;
color: red;
}
.nav-left {
float: left;
color: #02c576;
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 15pt;
letter-spacing: 4px;
height: 100%;
}
.logo {
position: relative;
height: 24px;
top: 50%;
margin: -12px 0px 0px 130px;
}
.nav-button {
display: none;
}
<div class="nav">
<div class="nav-inner">
<div class="nav-left">
<div class="logo">
<p>Company Name</p>
</div>
</div>
<div class="nav-right">
<div class="nav-menu">
<ol>
<li data-menu="Link1"> <a href=#>Link1</a> </li>
<li data-menu="Link2"><a href=#>Link2</a></li>
<li data-menu="Link3"><a href=#>Link3</a></li>
<li data-menu="Link4"><a href=#>Link4</a></li>
</ol>
</div>
</div>
<div class="nav-button">
<img src="Images/menu.png">
</div>
</div>
</div>

Answer 4

well, you code works fine for me
js fiddle linke
I saw your code and if you don't want to use <a> tag you have to add
.nav-menu li:hover{
color:#fff;
}
simple code
nav { width: 100px; height: 80px; position: fixed; }
nav li { display: inline-block; }
nav li:hover { color: white; }
<nav>
<ul>
<li>dhh</li>
<li>fs</li>
<li>ss</li>
</ul>
</nav>

Answer 5

The simplest way I've tried is putting a filler element inside the first element, and target styling hover for that inner element.