Question

我创建了水平菜单，自动突出显示当前项目。

#nav li a 
{
  display: block;
  padding: 3px 20px;
  text-decoration: none;
  color: #003254; 
}

使用这个技巧：

<body id="home">

这个CSS技巧

body#home ul#nav .menu-home, 
....
body#contact ul#nav .menu-contact {  background-color:  #EB9152;   }

这一直有效，直到我决定为每个点添加渐变。渐变添加到此片段：

#nav li a 
{
  display: block;
  padding: 3px 20px;
  text-decoration: none;
  color: #003254; 

  background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
  ..

之后，当前的菜单选择不再起作用 - 当前项目不会更改其全部显示。知道为什么吗？

Answer 1

我对你的“当前页面突出显示技巧”有点困惑，但看起来你只是用渐变覆盖你的背景颜色。你尝试过使用过：

background-color:  #EB9152!important;

Answer 2

通过反复试验，我将渐变从（nav li a）块移动到（nav）块后起作用 - 这里是完整的代码：

#nav
{
  float: right;   
  margin: 0 0 3em 0;
  padding: 0 0;
  list-style: none;

      background-color: rgba(225, 225, 225, .0);
   background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,241,241,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(215,215,215,1)));
background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
background: -o-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
background: -ms-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
background: linear-gradient(to bottom, rgba(241,241,241,1) 0%, rgba(246,246,246,1) 47%, rgba(215,215,215,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#d7d7d7', GradientType=0 );

}
#nav li { float: left;   }
#nav li a 
{
  display: block;
  padding: 3px 20px;
  text-decoration: none;
  color: #003254; 

    border-right-style:solid;
    border-right-color:#fff;
    border-right-width: 1px;
}

为什么添加CSS渐变禁用背景颜色样式？

2 个答案: