html - 子菜单上的渐变与主菜单上的颜色相同

Question

我有一个背景渐变的菜单行。我想将子菜单元素的样式设置为与主菜单相同，以便渐变颜色匹配。此外，当页面宽度发生变化时，颜色也会更新。

例如，当 Item #1 的渐变为红色->白色时，子菜单也一样。下一个 Item #2 有渐变白色->粉色，所以子菜单有相同的...等等

有什么方法可以只用 CSS 来实现吗？

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><style>
ul > li {display: block; float: left; margin-right: 10px; position: relative; padding: 1em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}
.main {
  background-image: linear-gradient(to right, red, white, pink, orange, yellow, green);
  height: 50px;
}
ul li ul li{
  background-image: linear-gradient(to right, red, white, pink);
  height: 50px;
}
</style>
<ul class="main">
  <li>
    <a href="#">Item #1</a>
    <ul>
      <li><a href="">Sub-Item #1</a></li>
      <li><a href="">Sub-Item #2</a></li>
      <li><a href="">Sub-Item #3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item #2</a>
    <ul>
      <li><a href="">Sub-Item #4</a></li>
      <li><a href="">Sub-Item #5</a></li>
      <li><a href="">Sub-Item #6</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item #3</a>
    <ul>
      <li><a href="">Sub-Item #7</a></li>
      <li><a href="">Sub-Item #8</a></li>
      <li><a href="">Sub-Item #9</a></li>
    </ul>
  </li>
</ul></code></pre>
</div>
</div>

这里是 http://jsfiddle.net/2rfvyq03/2/

Answer 1

你可以更新你的CSS

ul li ul li{
  background-image: linear-gradient(to right, red, white, pink,orange, yellow, green);
  height: 50px;
}

ul > li {display: block; float: left; margin-right: 10px; position: relative; padding: 1em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}
.main {
  background-image: linear-gradient(to right, red, white, pink, orange, yellow, green);
  height: 50px;
}
ul li ul li{
  background-image: linear-gradient(to right, red, white, pink,orange, yellow, green);
  height: 50px;
}

<ul class="main">
  <li>
    <a href="#">Item #1</a>
    <ul>
      <li><a href="">Sub-Item #1</a></li>
      <li><a href="">Sub-Item #2</a></li>
      <li><a href="">Sub-Item #3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item #2</a>
    <ul>
      <li><a href="">Sub-Item #4</a></li>
      <li><a href="">Sub-Item #5</a></li>
      <li><a href="">Sub-Item #6</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item #3</a>
    <ul>
      <li><a href="">Sub-Item #7</a></li>
      <li><a href="">Sub-Item #8</a></li>
      <li><a href="">Sub-Item #9</a></li>
    </ul>
  </li>
</ul>

http://jsfiddle.net/MadhawaMB/2rfvyq03/3/