Розкривний список

Робота з елементами <select>, <option> і <optgroup>

by oleksandr_s

HTML

<p>
    Оберіть страву:  
    <select name="menu" form="cafeMenu">
        <option autofocus></option>
        <optgroup label="Перша страва" id="first">
            <option value="1">Борщ</option>
            <option value="2">Суп</option>
            <option value="3">Солянка</option>
        </optgroup>
        <optgroup label="Друга страва" id="second">
            <option>Вареники</option>
            <option>Каша</option>
            <option>Піца</option>
        </optgroup>
        <optgroup label="Третя страва" id="third">
            <option>Чай</option>
            <option>Кава</option>
            <option>Узвар</option>
        </optgroup>
    </select>
</p>

CSS

p {
    font-weight: bold;
}
#first {
    background-color: yellow;
}
#second {
    background-color: lime;
}
#third {
    background-color: pink;
}