Градиент в подменю с теми же цветами, что и в главном меню

У меня есть линия меню с градиентом на фоне. Я хочу стилизовать элементы подменю так же, как и главное меню, поэтому цвета градиентов совпадают. Также, когда ширина страницы изменяется, цвета обновляются.Градиент в подменю с теми же цветами, что и в главном меню

Например, если элемент № 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/

источник

2016-06-22 Maryanka

Это, безусловно, не представляется возможным, если вы используете другой градиент для каждого основного элемента списка меню. – psycotik

Да, это можно сделать таким образом, но только если ширина меню зафиксирована в пикселях. В моем случае это не так. – Maryanka

Вы можете обновить 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/

источник

2016-06-22 09:23:23 Codeone

Извините, может быть, я не правильно задал вопрос, но хочу, чтобы градиент в подменю был идентичной частью из главного меню. – Maryanka

Например, если элемент №1 имеет градиент от красного до wtite, значит, подменю имеет то же самое. Следующий элемент №2 имеет градиент белый-> розовый, поэтому подменю имеет то же самое ... и так далее – Maryanka

использовать другой класс – Codeone

Вы можете использовать другой класс <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>

источник

2016-06-22 09:36:30 Codeone

Да, это может быть решение только в том случае, если меню имеет фиксированную ширину. К сожалению, в моем случае это не – Maryanka

, вы можете написать css, как этот 'width: 50px;' – Codeone

это меню реагирует на ширину страницы, поэтому жесткие цвета кодирования здесь неверны. Мне интересно, есть ли способ установить, например, высоту меню 200px и градиент отображения только в главном меню и подменю? Как маску? – Maryanka

Это лучшее решение я могу придумать ;

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/

источник

2016-06-22 09:53:43 psycotik

Градиент в подменю с теми же цветами, что и в главном меню

ответ

Смежные вопросы