Jquery 标题按钮悬停颜色

我是大约2周的网络开发新手，我正在制作一个网站。我一直试图让鼠标悬停在标题按钮上，但我找不到解决方案。这是代码

HTML:

---

我试过像相对位置和显示块这样的东西

请检查此CSS代码：

.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 a {
  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;
}

请看这里：

/*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 a {
    text-decoration: none;
    color: #fff;
    font-size: 1.250em;
}
.nav a:hover {
    background-color: #028482;
    opacity: 50%;
}
/*end of header*/

.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 a {
  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;
}