html - Hover doesn't function properly or at all -


on website have navigation bar want change colors red tint when hover on (right have set black). however, css doesn't @ when hover on navigation bar.

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 haven't logged in yet ?>     <li class="home"><a href="<?php echo url('/registration'); ?>">careers</a></li> <?php } else {     // show these items if 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 { 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 { padding-right: 20px; width: 150px; white-space: nowrap; } 

it looks you're missing css set hover. need like

#topnav:hover {background: red} 

Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -