Вылетающее меню разного цвета

Вы можете использовать селектор CSS next-sibling (+) для достижения этого, однако IE6 не получит стили.

Сделайте что-нибудь вроде следующего (например, свойства цвета):

ul ul li { background: darkblue; color: lightblue; }
ul ul li+li { background: blue; color: lightblue; }
ul ul li+li+li { background: lightblue; color: darkblue; }
ul ul li a:hover { color: black; }

В качестве альтернативы вам придется либо применить класс CSS к каждому элементу, идущему вниз (поговорите с программистом, если вы не несете за это ответственность), либо сделать это, добавив классы с помощью javascript.

В идеале постарайтесь убедить их, что вы не можете сделать это для IE6, но современные браузеры справятся нормально. Пока сайт все еще можно использовать, градиент цветов является очень незначительной потерей.

Я вижу две возможности с чистым css:

1. Если у вас есть фиксированная высота в пикселях для строк ввода, вы всегда можете использовать одно фоновое изображение с градиентами на нем. Если вы делаете свое меню со списками, вы можете просто прикрепить его к охватывающему тегу списка.

2. Если вы хотите сохранить гибкость высоты строки / размера шрифта, вы можете работать с несколькими классами: по одному для каждого цветового тона. Просто дайте каждой n-й строке специальный класс с соответствующим цветовым тоном в качестве цвета фона и вставьте этот класс в тег для этой строки.

критик дизайна: Проблема, которую я вижу здесь, заключается в том, что у вас будет максимальное количество записей, потому что с этим уровнем постепенного исчезновения цвет фона станет белым после шести или семи записей.

добрые слова: Если меню не должно быть прозрачным, все будет в порядке.

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

Я бы, вероятно, использовал метод Suckerfish с другим классом CSS для каждого уровня <li> в меню:

<ul id = "menu">
    <li class = "root"><a href = "#">Home</a></li>
    <!-- etc. -->
    <li><a href = "#">Products</a>
        <ul>
             <li class = "sub1"><a href = "#">BTE Legal Expense Insurance</a></li>
             <li class = "sub2"><a href = "#">Legal Services</a></li>
             <!-- etc. -->
        </ul>
    </li>
    <!-- etc. -->
</ul>

Я обнаружил, что это невозможно с Sharepoint