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:


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:


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!!


/*** Navigation bar CSS ***/
    font-family: Arial, Verdana;
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
ul li {
    display: block;
    position: relative;
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


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.

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, 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.


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">
                    <td id="bar1" align="left">
                        <b>Here is the TOP Bar ................</b>

Syndicate content