按钮上的影子盒停留在非活动的html页面

Question

我使用网站上的CSS在我的页面中创建水平导航栏。 但是，问题出在导航栏上，即使选择了其他一些页面，第一个链接也始终被遮蔽。

当我将鼠标悬停在导航栏中的某个其他链接上时，它会显示阴影框，但在我点击它之后永远不会停留。

如果你知道，请告诉我如何解决这个问题。

CSS

/* Base Styles */
#nav ul,
#nav li,
#nav a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#nav {
  border: 1px solid #133e40;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#nav ul {
  zoom: 1;
  background: #36b0b6;
  background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
  background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#nav ul:before {
  content: '';
  display: block;
}
#nav ul:after {
  content: '';
  display: table;
  clear: both;
}
#nav li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#nav li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}
#nav li.active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#nav li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
#nav li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#nav li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}

页

悬停在其他链接上

点击链接后，阴影框移回第一个链接

Answer 1

这是一个简单的类问题，我想： 当你进入＆＃34;关于＆＃34;页面（让我们假装其文件名为＆＃34; about.html＆＃34;）您将一个类应用于活动链接：

<li class='active'><a href='#'><span>About</span></a></li>
<li><a href='academics.html'><span>Courses</span></a></li>

所以，在＆＃34; academics.html＆＃34;页面，你必须删除＆＃34;关于＆＃34;并将其分配到当前页面，＆＃34;课程＆＃34;。所以：

<li><a href='about.html'><span>About</span></a></li>
<li class='active'><a href='#'><span>Courses</span></a></li>

等每个链接和页面都是如此。

修改 看看，这将是＆＃34;课程＆＃34;页面：http://jsfiddle.net/ck766/2/

Answer 2

使用您用于的相同css：将选择器悬停在活动选择器上

#nav li:active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  etc..

活动选择器定义：单击链接后，链接将变为活动状态。

所以只需给出：主动相同的css，或逗号分隔各类，这样你就不必浪费太多空间。

#nav li:hover, #nav li:active {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  etc..