Ciao a tutti,
sto utilizzaando le liste di definizione per assemblare il menù laterale ho un problema per quanto riguarda la barra tra un gruppo e l'altro di voci: es.

Codice PHP:
    <dl>
      <dt>Voce principale 1</dt>
      <dd>[url="#"]link secondario 1[/url]</dd>
      <dd>[url="#"]link secondario 1[/url]</dd>
      <dd>[url="#"]link secondario 1[/url]</dd>
      <dd class="barra"></dd>
      <dt>Voce principale 2</dt>
...... 
Dove ho messo la class barra devo mettere un'immagine, una linea per capirci eppoi riprendo un altro tag <dt> ...

Il codice CSS è il seguente:

Codice PHP:
dl{width:182px}

dt{
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #fff;
    font-weight: Bold;
    margin: 10px 0 0;
    text-align: left;
    margin-left: 3px;
}

dd {
    margin: 0;
    padding-left:14px;
    line-height: 1.4;
    background:url(../img/bullet.gif) no-repeat center left;
    margin-left: 3px;
}

[B]dd .barra [/B]  {
margin: 0;
padding: 0px; 
/*line-height: 1.3em;*/ 
width:183px;  
background-image: url(../img/linea.gif); 
background-repeat: repeat-x;
display: block;
} 
Però non me la vedo in pratica vedo un'immagine bullet.gif che sovrascrive il testo della <dt> successiva es. Voce principale 2 :master:
Come posso risolvere 'sto problema? Sbaglio tag? :master: