Layout for interactive infographic

Dear web UI designers and developers,

I have another tricky puzzle for you to solve. It would be challenge for you and you will help to make one nice project come true. I will briefly explain what I want from you.
Assume this sketch as a final product:

Menu

Here is grey picture with circle inside. Six buttons are placed around the circle. Each button is pointing on the circle with line. Here is button in detail:

Button

Creating a Fly-out menu bar - PROPER POST THIS TIME

Soooo I'm really struggling with this fly out menu stuff...the hover doesn't work and sub menus dont appear...any help would be appreciated!!

CSS

/*** Navigation bar CSS ***/
 
ul{
    font-family: Arial, Verdana;
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
 
ul li {
    display: block;
    position: relative;
    width:150px;
 
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;

Menu Layout

Hello!

I want to style the Menu as a column and something is not working right.

I've changed the width, so that the items would line up as a column, but it doesn't work if I use small words.

http://www.emilykimballart.com/

You can see how Blog and Shop remains in the same line, and I want Shop on a separate line below Blog.

#access {padding:0; margin:0 0 0 -306px; clear:right; width:110px; display:table-cell; vertical-align: middle; line-height:22px; z-index:98;overflow:visible;}
#access .menu-header ul, 
div.menu ul{list-style:none; margin:0}

Make my navigation visible over the jquery slider

Hover products or example and see the problem.
Maybe someone has encountered this problem in the past and knows exactly what's wrong.
I solved the problem partial by replacing the slider positions from absolute into inherit but id doesn't work properly. So any other ideas would be apreciated.

http://jsfiddle.net/melbourne/vjG56/

Thanks.

Displaying Superfish menu below top bar

I implemented the basic superfish menu. I wanted it to display after a div bar I have at the top of the page. It always displays covering the top bar. I tried changing the position, top and other css elements but didn't make any difference. Thanks for your help.

        <div id="home_bar">
            <table>
                <tr>
                    <td id="bar1" align="left">
                        <b>Here is the TOP Bar ................</b>
                    </td>
                </tr>
            </table>
        </div>
        <div>
            <table>

Syndicate content