GWT and CSS: Creating a drop down from hover

In the existing gwt project there are a set of buttons which when hovered lists a set of dropdown options. I want to create another drop down which will be created to the right when I hover over one of the option. The entire drop down effect is created using CSS. I am not much familiar with CSS and the thus the drop down is not getting created properly. Please suggest changes in the code.

From one of the drop down option Tickets I am creating a set of drop downs to the right with options.

The gwt code for the component is

<span id="menu">
                <ul>
                    <li>
                        <g:Hyperlink ui:field="linkDirectories" text="Directories"></g:Hyperlink>
                        <ul class="sub-menu">
                            <li>
                                <g:Hyperlink ui:field="linkTemplateReleases" text="Templates">
                                </g:Hyperlink>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <g:Hyperlink ui:field="linkHealth" text="Health"></g:Hyperlink>
                        <ul class="sub-menu">
                            <li>
                                <g:Hyperlink ui:field="linkGalaxyService" 
                                    text="GalaxyService">
                                </g:Hyperlink>
                            </li>
                            <li>
                                <g:Hyperlink ui:field="linkGalaxyInternalService" 
                                    text="WarpDriveService">
                                </g:Hyperlink>
                            </li>
                            <li>
                                <g:Hyperlink ui:field="linkGalaxyConsole" 
                                    text="GalaxyConsole">
                                </g:Hyperlink>
                            </li>
                            <li>
                                <g:Hyperlink ui:field="linkWarpDriveConsole" 
                                    text="WarpDriveConsole">
                                </g:Hyperlink>
                            </li>
                            <li>
                                <g:Hyperlink ui:field="linkGalaxyCanary" text="Canary">
                                </g:Hyperlink>
                            </li>
                            <li>
                                <g:Hyperlink ui:field="linkGalaxyMandark" text="Mandark">
                                </g:Hyperlink>
                            </li>
                            <li class="sub-menutickets">

                                <g:Hyperlink ui:field="linkTickets" text="Tickets"> </g:Hyperlink>
                                 <ul>
                                   <li>
                                    <g:Anchor ui:field="linkTickets1">Tickets Url 1</g:Anchor>
                                   </li>
                                </ul>                                    
                            </li>
                        </ul>
                    </li>
                    <li>
                        <g:Hyperlink ui:field="linkResources" text="Resources"></g:Hyperlink>
                        <ul class="sub-menu">
                            <li>
                                <g:Hyperlink ui:field="test" text="Test">
                                </g:Hyperlink>
                            </li>

                        </ul>
                    </li>
                    <li>
                        <g:Hyperlink ui:field="linkWorkflows" text="Workflows"></g:Hyperlink>
                        <ul class="sub-menu">
                            <li>
                                <g:Hyperlink ui:field="test2" text="Test2">
                                </g:Hyperlink>
                            </li>

                        </ul>
                    </li>
                </ul>
            </span>

The corresponding css style is

    #menu {
    vertical-align: top;
}
#menu ul {
    display: inline-block;
    list-style-type: none;
}
#menu li {
    border: 1px solid #999999;
    display: inline-block;
    margin: 0 10px;
    padding: 5px 0;
    position: relative;
    text-align: center;
}
#menu a, #menu a:visited, #menu a:hover {
    color: #666666;
    font: 20px Helvetica,Arial,sans-serif;
    letter-spacing: -1px;
    padding: 0 35px;
    text-decoration: none;
}
#menu li:hover, #menu li.selected {
    border-style: solid;
    border-width: 1px;
}
#menu li:hover ul li a {
    color: #666666;
}
#menu li:hover ul li:hover , #menu li:hover ul li.sub-menutickets:hover ul li:hover {
    border-bottom: 1px solid #999999;
}
#menu li ul.sub-menu li.selected a {
    color: #666666;
}
#menu li:hover ul li:hover a {
    color: #ffffff;
}
#menu ul.sub-menu {
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 36px;
    width: 100%;
    z-index: 90;
}
#menu ul.sub-menu li, #menu ul.sub-menu li.sub-menutickets ul li {
    background-color: rgba(255, 255, 255, 1);
    border-left: 0 none;
    border-right: 0 none;
    border-top: 0 none;
    display: none;
    margin: 0;
    text-align: center;
}
#menu li ul.sub-menu li a, #menu li ul.sub-menu li.sub-menutickets ul li a {
    border: 0 none;
    display: block;
    font-size: 15px;
    letter-spacing: 0;
    margin: 0;
    padding: 5px 0;
    width: 100%;
}
#menu li:hover ul.sub-menu li, #menu li ul.sub-menu li.selected, #menu li:hover ul.sub-menu li.sub-menutickets:hover ul li {
    display: block;
}
#menu ul.sub-menu li.sub-menutickets ul li {
    left: 100%;
    top: 0;
}
#menu li ul.sub-menu li.selected {
    border-color: #999999;
}

#menu li:hover, #menu li.selected {
    border-color: #4896dd;
}
#menu li:hover a, #menu li.selected a {
    color: #4896dd;
}
#menu li:hover ul li:hover a {
    background: #4896dd none repeat scroll 0 0;
}

I am attaching a screenshot of how it looks currently. Please