메인 메뉴에서와 같은 색상으로 서브 메뉴의 그라데이션

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>
 
   
 
  
 
 

 

당신은 당신의 CSS를 업데이트 할 수 있습니다 http://jsfiddle.net/2rfvyq03/2/

Answer 1

입니다

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

이 내가 가지고 올 수있는 최고의 솔루션입니다 같은 CSS를 의 색상에 추가 할 수있는 CSS에 대해 서로 다른 클래스 <ul class=sub1>을 사용할 수 있습니다 ; 각 메인 메뉴 목록 항목에 대해 다른 그라데이션을 사용하지 않는

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/