Ориентация элемента путем наведения другого элемента в CSS

Question

Как настроить таргетинг на один элемент при наведении, а затем воздействовать на другой элемент?

Вот HTML:

 <header> 
      <h1 style="float: left; margin-top: 2%;">&nbsp;&nbsp;&nbsp;Naughty Mama.</h1> 
      <nav> 
       <ul> 
        <li><a href="profile.php">My Profile</a></li> 
        <li><a href="inbox.php">Inbox</a></li> 
        <li><a href="notifications.php">Notifications</a></li> 
       </ul> 
      </nav> 
     </header> 

Вот 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; 
} 

Я хочу, чтобы осуществить nav ul li когда я парить на nav ul li a.

Надеюсь, что я поняла.

Answer 1

Вы можете в стиле <a>, поэтому он охватывает <li>. применить эффект парения в качестве фона для <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 
}