How to hide a <dl> item with CSS?

Are you saying you have multiple dl's and you want to delete only the first one?

dl:first-of-type{display:none;}

Or, are you saying in the dl you want to hide the first dt and the first dd?

dl dt:first-child, dl dt:first-child+dd{display:none;}

Or are you saying you just want to remove specifically the dt and dd where the dt has the class "coffee"?

.coffee, .coffee+dd{display:none;}

why not put it inline?

<dl style="display:none;">
 <dt class="coffee">Coffee</dt>
  <dd>Black hot drink</dd>
 <dt class="milk">Milk</dt>
  <dd>White cold drink</dd>
</dl> 

but it must really work on your current code. if you put the right css style rule like this

dl {
    display: none;
}

Here its should work

Here the demo: http://jsfiddle.net/r5uWX/

Your css should be

dl {
  display: none;
 }

and mention the css path depence up on your code. even if it is not working add !important like

dl {
  display: none !important;
 }

for example if this dl is child of a div element you can use this

    div.exampleclass dl:first-child {
       display : none
   }

for compatibility check this page http://www.w3schools.com/cssref/sel_firstchild.asp

ps: if you want remove first dt and dd you must use this code :

div.exampleclass dl dt:first-child, div.exampleclass dl dd:first-child {
           display : none
       }