Наведение не работает должным образом или вообще

Question

На моем веб-сайте у меня есть панель навигации, в которой я хочу изменить цвета на красный оттенок, когда я навис над ним (прямо сейчас у меня он черный). Тем не менее, CSS не делает ничего вообще, когда я нависаю над панелью навигации.

HTML:

<div id="topNav"> 
     <ul class="nav"> 
<li class="home"><a href="<?php echo url('/'); ?>">Home</a></li> 
<li><a href="<?php echo url('/about'); ?>">About Us</a></li> 
<?php 
if(!Auth::LoggedIn()) 
{ 
    // Show these if they haven't logged in yet 
?> 
    <li class="home"><a href="<?php echo url('/registration'); ?>">Careers</a></li> 
<?php 
} 
else 
{ 
    // Show these items only if they are logged in 
?> 
    <li><a href="<?php echo url('/profile'); ?>">Pilot Center</a></li> 

<?php 
} 
?> 
<li class="home"><a href="<?php echo url('/ops'); ?>">Operations</a></li> 
<li class="home"><a href="<?php echo url('/forums'); ?>">Forums</a></li> 
<li class="home"><a href="<?php echo url('/contact'); ?>">Contact Us</a></li> 
<li><a href="<?php echo url('/acars') ?>">Live Map</a></li> 
<?php echo $MODULE_NAV_INC;?> 
<?php 
if(Auth::LoggedIn()) 
{ 
    if(PilotGroups::group_has_perm(Auth::$usergroups, ACCESS_ADMIN)) 
    { 
     echo '<li><a href="'.fileurl('/admin').'">Admin Center</a></li>'; 
    } 
?> 


<li><a href="<?php echo url('/logout'); ?>">Log Out</a></li> 
<?php 
} 
     </ul> 
    </div> 

CSS:

#topNav { font-size: 14px; padding-top: 10px; width: 970px; margin: auto; height: 50px; background-color: #000; } 

#topNav ul { margin: 0; padding: 0; list-style: none; margin: 0 auto; } 
#topNav ul:hover { margin: 0; padding: 0; list-style: none; margin: 0 auto; } 

#topNav ul li { height: 37px; float: left; padding: 0px; font: bold 12px/37px Arial, Helvetica, sans-serif; } 
#topNav ul li:hover { height: 37px; float: left; padding: 0px; font: bold 12px/37px Arial, Helvetica, sans-serif; } 

#topNav ul li a { padding: 0 18px; height: 37px; float: left; text-decoration: none; display: block; color: #ffffff; font: 14px/37px Arial, Helvetica, sans-serif; } 
#topNav ul li a:hover { padding: 0 18px; height: 37px; float: left; text-decoration: none; display: block; color: #ffffff; font: 14px/37px Arial, Helvetica, sans-serif; } 

.nav, .nav ul { list-style: none; margin: 0; padding: 0; } 

.nav { font-family: Arial, Helvetica, sans-serif; z-index: 1000; position: relative; } 
.nav li { float: left; margin: 0; padding: 0; position: relative; } 
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited { font: bold 1.22em/25px Arial, Helvetica, sans-serif; color: #959595; display: block; padding: 0 9px; text-decoration: none; } 

.nav ul { list-style: none; margin: 0; width: 150px; position: absolute; top: -999em; left: -1px; } 
.nav ul li { border: 0; float: none; } 
.nav ul a { padding-right: 20px; width: 150px; white-space: nowrap; } 

Answer 1

Похоже, вы пропустили CSS на самом деле установить его парить. Вам нужно что-то вроде

#topNav:hover {background: red}