jquery - Header Button Hover Colour -


i 2 weeks new web development , in process of making website. have been trying hover on header button working can't find solution. here code.

html:

    <!doctype html> <html lang="en">  <head>     <title>home</title>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <link rel="stylesheet" type="text/css" href="style.css">     <link href='http://fonts.googleapis.com/css?family=pt+sans' rel='stylesheet' type='text/css'>     <script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script> </head>  <body>     <div class="banner">     </div>     <div class="nav">       <ul>         <li><a class="active" href="#">home</a></li>         <li><a href="#">about us</a></li>         <li><a href="#">faq</a></li>         <li><a href="#">orbat</a></li>       </ul>      </div> 

css:

/*stylesheet */  body {     margin: 0;     padding: 0;     background: #ccc;     overflow-x: hidden;     font-family: 'pt sans' }  /*header*/ .banner {     background-image: url('http://www.respectfulrevolution.org/sites/all/themes/curiouser_respect/graphics/header.png');      width: 100%;     height: 100px; } .nav {     width: 100%;     height: 90px;     position: fixed;     background-color: #444;  } .nav ul {     list-style: none;  } .nav  li{     display: inline-block;     padding: 15px 20px 15px 20px;     margin: 0;     background-color: #3f3f3f; } .nav {     text-decoration: none;     color: #fff;     font-size: 1.250em; } .nav a:hover {     background-color: #028482;     opacity: 50%; } /*end of header*/ 

i have tried things position relative , display block.

please check css code:

.nav {   width: 100%;   position: relative;   background-color: #444;   min-height: 1px; } .nav:after, .nav:before{   display: table;   content: " ";   clear: both; } .nav ul {   list-style: none;  } .nav li{   display: inline-block;   margin: 0; } .nav li {   border-radius: 3px;   text-decoration: none;   color: #fff;   font-size: 1.250em;   padding: 15px;   background-color: #3f3f3f;   transition: background 0.3s ease, color 0.3s ease;   -webkit-transition: transition: background 0.3s ease, color 0.3s ease;   -moz-transition: transition: background 0.3s ease, color 0.3s ease; } .nav li a:hover, .nav li a:focus {   background-color: #028482;   transition: background 0.3s ease, color 0.3s ease;   -webkit-transition: transition: background 0.3s ease, color 0.3s ease;   -moz-transition: transition: background 0.3s ease, color 0.3s ease; } .nav li a.active{   background-color: #028482 !important;   transition: background 0.3s ease, color 0.3s ease;   -webkit-transition: transition: background 0.3s ease, color 0.3s ease;   -moz-transition: transition: background 0.3s ease, color 0.3s ease; } 

see here: https://jsfiddle.net/nkjp2uj3/2/


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -