How to use overflow:hidden only on the last dt of an dl

I'm not sure, if there's a(n easy) solution, but the problem looks like this:

I've got an pretty basic Accordion built with a dl;

<dl>
<dt>MenueLink1</dt>
<dd>Content1</dd>
<dt>MenueLink2</dt>
<dd>Content2</dd>
.
.
.
<dt>Logo</dt>
</dl>

The last dt contains a logo. And here's the scoop: I want to use overflow:hidden only for the last dt containing the logo. So if the Logo moves outside the browser/screen (as a result of the different heights of the Content-DDs) I don't want the Browser to show a scrollbar, but as soon as another dd or dt leaves the screen/browser the scrollbar should appear. My first Idea was to put the logo in a seperate div outside the dl, but then it doesn't move up and down with the rest of the d开发者_如何学编程l when the height changes...

I would be really happy if anyone can give me a hint or a solution.

---

Depends on what browsers you need to support. The selector dl dt:last-child will work for you if the browsers you target support it.

Otherwise, the usual practice is to give the class last-item to the last dt when you are generating the HTML and use dl dt.last-item which is of course universally supported.