I was wondering if you can help me with the following:

I have a select menu, where I am hiding the first 3 options.
Although they have 'display:none' i can still see the first option. I was expecting to see 'Tomato (I ♥ JS shirt only)' as it is the next after the hidden ones...

```
<select id="color">
            <option value="cornflowerblue" class="puns">Cornflower Blue (JS Puns shirt only)</option>
            <option value="darkslategrey" class="puns">Dark Slate Grey (JS Puns shirt only)</option> 
            <option value="gold" class="puns">Gold (JS Puns shirt only)</option> 
            <option value="tomato" class="heart">Tomato (I &#9829; JS shirt only)</option>
            <option value="steelblue" class="heart">Steel Blue (I &#9829; JS shirt only)</option> 
            <option value="dimgrey" class="heart">Dim Grey (I &#9829; JS shirt only)</option> 
          </select>

var punOption = document.getElementsByClassName('puns');
for(var i=0; i < punOption.length; i++) {
    punOption[i].style.display = 'none';
}

```

Thanks,
Alina