Targeting an element by hovering another element in CSS - html

Question

How can I target one element on hover and then effect an other element?
Here's the HTML:
<header>
<h1 style="float: left; margin-top: 2%;"> Naughty Mama.</h1>
<nav>
<ul>
<li>My Profile</li>
<li>Inbox</li>
<li>Notifications</li>
</ul>
</nav>
</header>
Here's the CSS:
#CHARSET "ISO-8859-1";
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li{
display: inline;
padding: 15px;
background-color: #eee;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
color: #000;
}
I want to effect the nav ul li when I hover on nav ul li a.
Hope I am clear.

Answer 1

You may style <a> so it covers <li>. apply hover effect as background to <a> :)
http://codepen.io/anon/pen/zyDLA
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li{
display: inline-block;
background-color: #eee;
vertical-align:top;
}
nav ul li a {
color: #fff;
text-decoration: none;
display:block;
padding:15px;
}
nav ul li a:hover {
color: #000;
background:#48a
}