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
Post a Comment