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

Question

我在背景上有一个带渐变的菜单行。我希望将子菜单元素设置为与主菜单相同，因此渐变颜色匹配。此外，当页面宽度更改时，颜色会更新。

例如，当项目＃1具有渐变红色 - >白色时，子菜单具有相同的效果。下一个项目＃2具有渐变白色 - >粉红色，因此子菜单具有相同的......等等

有没有办法只使用CSS？

1.0

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

Answer 1

您可以更新您的CSS

if (BuildConfig.FLAVOR.equals("firstApp")) {
        webButton = (FancyButton) findViewById(R.id.webButton);
        webButton.setBackgroundColor(Util.getColorFromString(""));
        webButton.setIconColor(Util.getColorFromString("#005126"));
}

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

您可以为可以添加到css颜色的CSS使用不同的类<ul class=sub1> 像这样 ul.sub1 { background-image: linear-gradient(to right, red, white); height: 150px; }

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.sub1 {
  background-image: linear-gradient(to right, red, white);
  height: 150px;
}

ul.sub2 {
  background-image: linear-gradient(to right, pink, white);
  height: 150px;
}

ul.sub3 {
  background-image: linear-gradient(to right, pink,yellow);
  height: 150px;
}

<ul class="main">
  <li class="sub">
    <a href="#">Item #1</a>
    <ul class=sub1>
      <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 class=sub2>
      <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 class=sub3>
      <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>

Answer 3

这是我能提出的最佳解决方案;

HTML

<ul class="bg">
  <li class="main">
    <a href="#">Item #1</a>
    <ul class="main">
      <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 class="main2">
    <a href="#">Item #2</a>
    <ul class="main3">
      <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 class="main3">
    <a href="#">Item #3</a>
    <ul class="main3">
      <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>

CSS

ul > li {display: block; float: left; margin-right: 10px; position: relative; padding: 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}
ul li {margin:0px;}
.bg {
  background-color:orange;
  height: 50px;
}
.main {
  background-image: linear-gradient(to right, red, white);
}
.main2 {
  background-image: linear-gradient(to right, white, pink);
}
.main3 {
  background-image: linear-gradient(to right, pink,orange);
}

http://jsfiddle.net/2rfvyq03/5/

Answer 4

解决方案是在菜单和子菜单的渐变中使用background-attachment: fixed;：

ul.main{
display:flex;
  padding: 0;
}
ul.main > li {
  position: relative;
  list-style: none;
}
a {
  padding: 1em;
  display: block;
}
ul ul {
  display: none;
  width: 150px;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
}
ul ul > li {
  list-style: none;
}
ul > li:hover > ul {
  display: block;
}
.main {
  background-image: linear-gradient(to right, red 0, white, pink, orange, yellow, green);
  background-attachment: fixed;
}
ul li ul li {
  background-image: linear-gradient(to right, red, white, pink, orange, yellow, green);
  background-attachment: fixed;
}

<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>