3 Level List with Hover-to-Content Pane in CSS

Question

I am not certain if a content pane is the right term to be using for this, but what I am trying to achieve is definitely close to that description.

I am attempting to write a webpage that has a section with a List, with Sublists that when hovered over will display their own subs to a 'content' pane to the side such that the space to the right is filled with info about the hovered-over list item. For example, say the list is as follows:

• Workshops
  • Workshop A
  • Workshop B
  • Workshop C
• Training
  • Training Program A
  • Training Program B
• Products
  • Product A
  • Product B
  • Product C

With my current method (described in more detail below) I have a div with formatted content displaying to the right, but each section displays this third tier div to the right of the first item in the corresponding second tier list. I am hoping there is a way to have this third tier always appear to the right of the at the very start of this tree, but I am unsure how.

I feel a CSS only approach is doable for this, so my question is: How can I get the third tier list (in the form of a div) to display to the right of the very first bullet regardless of which second tier it springs from?

My current code is as follows:

/*  ------------------------   Pane  --------------------------- */

#Content_Menu {
    margin: 0px;
    padding: 0px;
}

/* Main List */

#Content_Menu ul {
    position: relative;
    left: 10px;
    padding: 0;
    list-style-type: none;
}

#Content_Menu li {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
    text-align: left;
}

/* Sub List */

#Content_Menu li  ul {
    position: relative;
    left: 20px;
    top: 100%;
    padding: 0px;
    margin: 0px;
}

/* Sub-Sub List aka. Content Pane */

#Content_Menu li  ul  li ul{
    display: none;
    position: absolute;
    left: 40%;
    top: 0px;
    padding: 0px;
    margin: 0px;
}

#Content_Menu li  ul  li:hover ul{
    display: inline;
    padding: 0px;
    margin: 0px;
}

and the html is:

<div id='Content_Menu'>
    <ul>
        <li><a href='Service_Workshop.html'><span>Workshops</span></a>
            <ul>
                <li>
                    <a href='#'><span>Workshop A</span></a>
                    <ul>
                        <li>
                            <div class="Content_Pane_Info">
                                <h3> Workshop A </h3>
                            </div>
                            <p> This is sample text /<p>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href='#'><span>Workshop B</span></a>
                    <ul>
                        <li>
                            <div class="Content_Pane_Info">
                                <h3> Workshop B </h3>
                            </div>
                            <p> This is sample text /<p>
                        </li>
                    </ul>
                </li>

etc.

Answer 1

Remove the relative position off the all the uls and just assign to the ul itself.

#Content_Menu > ul {
    position: relative;
}

Do not have a position relative here:

 #Content_Menu ul {
        padding: 0;
        list-style-type: none;
    }

DEMO w/edit: http://jsbin.com/ginewi/1/edit

DEMO: http://jsbin.com/ginewi/1/