Align element next to currently chosen menu item - html

Question

I tried to find a solution to this problem, but failed (maybe I my searching skills are just horrible). Basically, here is the webpage http://www.eboxlab.net/transbeam/our-solutions/data-and-internet-services/.
There are two menu items here, in the first box you see the link "Data and Internet Services is chosen" and the second box is just three elements behaving like anchors. Right now, those are aligned next to the top element in the first level menu (Data and Internet Services). What I need to achieve is that when you choose another option (VoIP and Voice Services for example) the second box moves next to it. So it's aligned depending on the active link in the first menu. I am pretty sure this can be achieved with javascript, but I am really bad at it.
PS: Although I am bad at JS feel free to use all the terms, I will do my research later, just need the code and a little explanation behind it, so in the future I will be able to do this myself.
May be setting a margin to the right box if a certain element in the left one is chosen.

Answer 1

Firstly, there is solution for your webpage, but it cannot be done via JavaScript.
JavaScript can do things like what you thought, but note that it only works on the same page. It means that when user click somewhere, and still remains on the same page, JavaScript can do many things, like change the DOM structure, change style of something, or do some animation. But if the page is redirected to another page, that's different.
[Solution for your webpage]
On the page for item "VoIP and Voice Services" (http://www.eboxlab.net/transbeam/our-solutions/voip-and-voice-services/), add following CSS to your page file:
#banner .left_box .box-2 {
margin: -10px 0 0 20px;
}
For other items, it would be similar to change the margin to adjust its position (vertically position):
Page of "Cloud Services"
#banner .left_box .box-2 {
margin: 30px 0 0 20px;
}
Page of "Integrated Voice and Data Services"
#banner .left_box .box-2 {
margin: 70px 0 0 20px;
}
Page of "Additional Data and Voice Features
#banner .left_box .box-2 {
margin: 110px 0 0 20px;
}
Or you can just change "margin-top", both work.
/* Following part added at 15:08 Oct 28, GMT+8 */
[Solution for webpage with Template]
1. In the template file, change this line
<div class="box-2">
to
<div class="box-2-{$item}">
Note: {$item} is variable format of Smarty, you may change this to your own template's format.
2. In each page, assign an identical value to this variable, you will do something like:
$smarty->assign('item','item1'); //assign item2, item3 to the other two pages.
3. In Style file ("transbeam/wp-content/themes/transbeam/style/style.css"), add following lines:
#banner .left_box .box-2-item1 {
background:url(../images/sep_1.png) no-repeat left;
float:left;
height:163px;
margin:-50px 0 0 15px;
}
#banner .left_box .box-2-item2 {
background:url(../images/sep_1.png) no-repeat left;
float:left;
height:163px;
margin:-10px 0 0 15px;
}
#banner .left_box .box-2-item3 {
background:url(../images/sep_1.png) no-repeat left;
float:left;
height:163px;
margin:30px 0 0 15px;
}
This should work, hope to help you out.