Как сделать меню справа?

Question

У меня есть меню с ToolGroups:

Я хочу, чтобы появиться на правой стороне в наведен toolgroup DIV подменю. Как я могу реализовать это с помощью html5, javascript (также jQuery) и CSS?

EDIT: Исходный код на 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

Вот простое решение для CSS это 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; } 

Answer 2

Вы можете использовать событие парения на некоторых дочерних списков:

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; 
} 

Или с JQuery, связать MouseEnter/MouseOut события и исчезают в:

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

Answer 3

Необходимо иметь меню справа, уже существующее и отформатированное с помощью HTML и CSS. Как только это будет сделано, установите все их в display:none через CSS.

Теперь мы переходим к javascript (я покажу вам решение jQuery, потому что это проще, и вы предложили его).

Что-то подобное должно выполнить свою задачу:

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

Это очень просто, урезанная версия только, чтобы вы двигаетесь в правильном направлении.

Важно, чтобы следующее ваше подменю внутри каждой связанной группы инструментов, таким образом, обработчик hover применяется как к пункту меню, так и к элементу подменю.

Обратите внимание, что селекторы в приведенном выше коде просто псевдокод, я не могу использовать ваш код, потому что вы его не поставляли, но замените их, если применимо.

Вот основной jsfiddle http://jsfiddle.net/rsEGZ/1/

Единственная причина, я рекомендую JavaScript (и JQuery) вместо CSS, потому что это позволяет свободу, чтобы вырастить это в чем-то более сложное по анимации и обратных вызовов.

НО, вот CSS решение http://jsfiddle.net/rsEGZ/2/