How to make a drop-right menu?

Question

I have a Menu with ToolGroups:

I want to let appear a sub-menu on the right side of an hovered toolgroup div. How can I realize this with html5, javascript(also jQuery) and CSS?

EDIT: Source code on JsFiddle

   <div id="menu">
        <center><h1>Toolbox</h1></center>
        <hr/>
        <div class="toolGroup">MyToolGroup&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup2&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup3&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup4&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup5&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup6&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup7&Rightarrow;</div>
        <hr/>
        <br/>
    </div>

#menu
{
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #c0c0c0;
    border-radius: 8px;
    padding: 10px 10px 10px 10px;
}

.toolGroup
{
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

Answer 1

You need to have the menus on the right already existing and formatted via HTML and CSS. Once this is done, set them all to display:none via CSS.

Now we move on to javascript (I'll show you a jQuery solution because it's easier and you suggested it).

Something like this should accomplish your task:

$(function(){
    $(MyToolGroup).hover(function(){
        $(MyToolGroupSubMenu).css("display","box")
    },function(){
        $(MyToolGroupSubMenu).css("display","none")
    })
})

This is a VERY simple, stripped down version just to get you moving in the right direction.

The important thing is to next your sub-menu inside of each relating toolgroup, this way the hover handler applies to both the menu item as well as the sub-menu item.

Please note that the selectors in the code above are just pseudo code, I can't use your code because you did not supply it, but replace them as applicable.

Here's a basic jsfiddle http://jsfiddle.net/rsEGZ/1/

The only reason I recommend javascript (and jQuery) instead of CSS is because it allows for the freedom to grow this into something more intricate through animations and callbacks.

BUT, here is the CSS solution http://jsfiddle.net/rsEGZ/2/

Answer 2

You could use a hover event on some child lists:

http://jsfiddle.net/qAZFC/1/

HTML:

<div class="toolGroup">MyToolGroup4&Rightarrow;
    <ul>
        <li>Test item</li>
        <li>Test item</li>
        <li>Test item</li>
    </ul>
</div>

CSS:

.toolGroup ul {
    display:none;   
}
.toolGroup:hover ul {
    display:block;   
}

Or with jQuery, bind a mouseenter/mouseout event and fade in:

http://jsfiddle.net/7TPab/1/

Answer 3

Here is the simple css solution for it http://jsfiddle.net/Mohinder/UJErC/

HTML

<ul class="toolgroup">
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    </ul>

CSS

body,ul,li { margin:0px; padding:0px; }
.toolgroup,.toolgroup li ul { padding:0px; list-style:none; width:150px; background:#ccc; border:1px solid #000; }
.toolgroup li,.toolgroup li ul li { width:100%; position:relative; }
.toolgroup li a,.toolgroup li ul li a { padding:7px 10px; display:block; border-bottom:1px solid #000; }
.toolgroup li ul { display:none; position:absolute; left:150px; top:0px; }
.toolgroup li:hover ul { display:block; }