與主菜單上的顏色相同的子菜單上的漸變

Question

我在背景上使用漸變菜單行。我想要設置與主菜單相同的子菜單元素，所以漸變顏色匹配。同樣當頁面寬度改變時，顏色被更新。

例如，當項目＃1具有漸變紅色 - >白色時，所以子菜單具有相同的。下一個項目＃2有漸變白色 - >粉紅色，所以子菜單有相同的...等等

有沒有什麼辦法可以用CSS做到這一點？

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

 

這裏是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/

Answer 2

您可以使用不同類<ul class=sub1>的CSS，你可以添加到顏色的CSS 這樣 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/