Id within Id in CSS

Hi everyone,
I have to add a new link at the top in my webpages.We already have a couple of links at the top right and this new link should come exactly below it. We have CSS for aligning this link to the right and its within a div container. Basically the code looks like this :

<div id="somename">
content
<ul id="another name">
<li class="foo">link1</li>
<li class="bar">link2</li>
<li>link3</li>
</ul>
</div>
The foo class makes the hyper link as normal text and adds a line border like this |, the bar class does the same but without the |. The alignment attributes are provided by the CSS #somename.

Now my question, what CSS should I apply to make link3 appear below link1 and link2,before that how do I select <li>link3</li> for applying CSS ? By default if I don provide any CSS then link3 comes to the right of link2 (thats obvious because its within <div id="somename">.

I closed the <div> tag and created a new <div> for housing link3 and applied display:block. This works fine but I'm not supposed to close the <div>,link3 should be within the <div id="somename">. Really wierd !. Any help guys?:)

Just in case my post isn't clear, I'm providing a sample of how my page should be :

Link1 | Link2
Link3

The above links should be at the top right.

[Dandello]

I'm not sure this can be done through css alone unless you limit the width of "somename" or of "another name" to something that just allows the two first links side-by-side. Otherwise, you may have to simply add a br inside the li for link3.

[ko ko]

ul#another-name li {
      display: block;
}
ul#another-name li.foo, ul#another-name li.bar {
      display: inline;
}

This is all I understand your question. Post your CSS code to know more clearly.