display: hidden CSS not working

Question

I'm trying to make parts of a list hidden when the page loads.
Specifically the sdt_wrap class of my HTML.
I know that the display:hidden is in the correct spot it just is not taking in the hidden value

Here is the CSS:

ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:50px;
    width:170px;
    height:150px;
    z-index:501;
    display: hidden;
}

Answer 1

hidden is not a valid value for display. You're looking for none, as in:

ul.sdt_menu li span.sdt_wrap{
    display:none;
}

Documentation

CSS display on MDN - https://developer.mozilla.org/en/CSS/display

Answer 2

It's display:none or visibility:hidden. 'hidden' is not a valid value for 'display'.